/* Owner-selected modern direction: balanced masthead, original factory photos. */
@font-face {
  font-family:'DM Sans';
  src:url('/assets/fonts/dm-sans.8cd08d97e89c.ttf') format('truetype');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

@font-face {
  font-family:'Instrument Serif';
  src:url('/assets/fonts/instrument-serif.498efd461f6d.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:'Instrument Serif';
  src:url('/assets/fonts/instrument-serif-italic.08939b8bdf53.ttf') format('truetype');
  font-style:italic;
  font-weight:400;
  font-display:swap;
}

:root {
  --paper:#fcfaf6;
  /* One page column for every page (owner request 2026-10-07): header, heroes, sections and footer
     share the same left edge at every width, centred at 1320px on large screens. */
  --content-width:1320px;
  --content-gutter:clamp(20px,5vw,64px);
  --gutter:max(var(--content-gutter),calc((100% - var(--content-width)) / 2));
  --hero-type:clamp(46px,6.8vw,88px);
}

body {
  font-family:'DM Sans',Arial,sans-serif;
  color:var(--blue);
  font-optical-sizing:auto;
}

.header-shell {
  padding:24px var(--content-gutter) 0;
  background:var(--paper);
}

.is-home .header-shell {
  background:var(--blue);
}

.site-header {
  max-width:var(--content-width);
  margin:auto;
  padding:10px 24px 10px 30px;
  min-height:76px;
  border:0;
  border-radius:100px;
  background:var(--paper);
  gap:25px;
  position:relative;
  z-index:5;
}

.site-header .brand img {
  width:168px;
  height:48px;
}

.site-header nav {
  gap:24px;
  font-weight:500;
}

.button,.nav-cta {
  border-radius:999px;
  min-height:48px;
  gap:24px;
  font-size:16px;
  font-weight:600;
  padding:10px 24px;
}

.site-header .nav-cta {
  min-width:220px;
}

.arrow-icon {
  width:24px!important;
  height:24px!important;
  flex:none;
  object-fit:contain;
}

.primary .arrow-icon,.nav-cta .arrow-icon {
  filter:invert(1);
}

.nav-services {
  position:relative;
}

.nav-services summary {
  cursor:pointer;
  list-style:none;
  padding:14px 0;
}

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

.nav-services summary:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.services-menu {
  position:absolute;
  top:100%;
  left:-24px;
  /* 246 = 240 + 当前项左侧槽位占掉的 6px，文字可用宽度与改动前一致，不会多出换行 */
  min-width:246px;
  padding:12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 12px 30px #06366b12;
  display:grid;
  gap:2px;
}

.services-menu a {
  position:relative;
  padding:10px 12px 10px 18px;
  border-radius:10px;
  white-space:normal;
}

.services-menu a:hover {
  background:var(--soft);
}

/* The service page being viewed is marked inside the menu as well as on Services itself.
   The marker is its own rounded bar in the left gutter: an inset box-shadow followed the item's
   10px corner radius and read as a clipped bracket (owner, 2026-10-15). */
.services-menu a[aria-current] {
  background:var(--soft);
}

.services-menu a[aria-current]::before {
  content:"";
  position:absolute;
  left:7px;
  top:50%;
  width:3px;
  height:18px;
  transform:translateY(-50%);
  border-radius:999px;
  background:var(--blue);
}

.menu-toggle {
  border-radius:100px;
}

.home-hero {
  background:var(--blue);
  color:var(--paper);
  border-radius:0 0 48px 48px;
  padding:0 max(var(--content-gutter),calc((100% - var(--content-width))/2));
}

.home-masthead {
  max-width:1000px;
  width:90%;
  margin:0 auto;
  padding:36px 0 30px;
}

.home-location {
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:18px;
  font-weight:400;
}

.home-masthead h1 {
  font-size:var(--hero-type);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.04;
  margin:0;
  width:max-content;
  max-width:100%;
}

.headline-service {
  display:block;
  white-space:nowrap;
}

.headline-sorted {
  display:block;
  text-align:right;
  position:relative;
  margin-top:2px;
}

.hanging-period {
  position:absolute;
  left:100%;
  letter-spacing:0;
}

.home-intro {
  position:relative;
  width:58%;
  margin-top:calc(var(--hero-type) * -1.01);
  padding-top:12px;
}

.home-intro p {
  font-size:clamp(17px,1.55vw,20px);
  line-height:1.4;
  letter-spacing:-.025em;
  margin-bottom:20px;
}

.home-intro .light {
  background:#e0f0fb;
  min-width:220px;
}

.home-intro .light:hover {
  background:white;
}

.home-panorama {
  margin:0;
  border-radius:26px;
  overflow:hidden;
  background:#d5e1e9;
}

.home-panorama img {
  width:100%;
  height:auto;
  aspect-ratio:3.06;
  object-fit:cover;
  object-position:50% 59%;
}

.home-values {
  max-width:1000px;
  margin:0 auto;
  padding:24px 0 28px;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  color:#d1e2f2;
  font-size:clamp(14px,1.3vw,18px);
  text-align:center;
  line-height:1.4;
}

.home-values li+li {
  border-left:1px solid #8aaccd;
}

.home-story {
  max-width:var(--content-width);
  width:calc(100% - 2 * var(--content-gutter));
  margin:0 auto;
  padding:48px 0 0;
  display:grid;
  grid-template-columns:2.55fr 1fr;
  gap:36px 4.5%;
}

.home-story h2 {
  grid-column:1/-1;
  margin:0;
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  font-size:clamp(56px,6.5vw,92px);
  letter-spacing:-.005em;
  line-height:.87;
}

.home-story h2 em {
  font-weight:400;
}

.home-finishing {
  grid-column:1;
  grid-row:2;
  margin:0;
  border-radius:22px;
  overflow:hidden;
  align-self:end;
}

.home-finishing img {
  width:100%;
  height:auto;
  aspect-ratio:2.65;
  object-fit:cover;
  object-position:50% 62%;
}

.home-story-copy {
  grid-column:2;
  grid-row:2;
  align-self:start;
  margin-top:0;
  font-size:clamp(17px,1.4vw,19px);
  line-height:1.4;
  letter-spacing:-.025em;
}

.home-story-copy .family-note {
  font-size:clamp(15px,1.25vw,18px);
  font-weight:600;
  margin-bottom:18px;
  line-height:1.5;
}

.home-story-copy .text-link {
  margin-top:15px;
  font-size:clamp(16px,1.25vw,18px);
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--blue);
  padding-bottom:12px;
  font-weight:500;
}

.home-services {
  max-width:var(--content-width);
  width:calc(100% - 2 * var(--content-gutter));
  margin:56px auto 0;
}

.home-services h2 {
  max-width:710px;
  font-size:clamp(32px,4vw,48px);
  margin-bottom:28px;
}

.home-close {
  max-width:var(--content-width);
  width:calc(100% - 2 * var(--content-gutter));
  margin:40px auto 48px;
  padding:20px 24px;
  border-radius:100px;
  background:#f0ede8;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
}

.home-close .button {
  min-width:220px;
}

.site-footer {
  background:var(--paper);
  border-top:1px solid var(--line);
}

/* Issue #38 composition stays scoped to the Accommodation page. */
.accommodation-shell,.accommodation-page .accommodation-linen-range {
  width:100%;
  max-width:calc(var(--content-width) + 2 * var(--content-gutter));
  margin-inline:auto;
  padding-inline:var(--content-gutter);
}

.accommodation-page h2 {
  font-size:clamp(30px,4vw,48px);
  max-width:760px;
  margin-bottom:24px;
}

.accommodation-page p {
  max-width:680px;
}

.accommodation-page .accommodation-hero {
  margin:0;
  padding:clamp(48px,7vw,96px) 0;
  background:var(--soft);
  color:var(--blue);
}

/* The hero's picture sits inside the page container, so it lines up with the copy instead of
   running to the screen edge (owner, 2026-10-16). */
.accommodation-hero .hero-copy p { max-width:620px; }

.accommodation-hero h1 {
  max-width:900px;
  font-size:clamp(30px,6.4vw,84px);
  overflow-wrap:break-word;
}


.accommodation-capability {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:clamp(28px,5vw,64px);
  padding-block:clamp(48px,6vw,80px);
}

.accommodation-capability .factory-service-photo {
  margin:0;
}

.accommodation-capability img {
  border-radius:20px;
}

.accommodation-page .accommodation-linen-range {
  margin:0 auto;
  padding-block:0 clamp(48px,6vw,80px);
}

.accommodation-planning {
  padding-block:clamp(48px,6vw,80px);
  background:var(--soft);
}

.accommodation-steps {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px 64px;
  margin:36px 0 0;
  padding-left:24px;
}

.accommodation-steps li {
  padding-left:8px;
}

.accommodation-steps li::marker {
  font-weight:600;
}

.accommodation-steps h3 {
  font-size:24px;
  margin-bottom:14px;
}

.accommodation-steps p {
  margin-bottom:0;
}

.accommodation-enquiry {
  padding-block:clamp(48px,6vw,80px);
}

@media(max-width:760px) {
  .accommodation-capability,.accommodation-steps {
    grid-template-columns:1fr;
  }
}

.accommodation-linen-range {
  margin:0 var(--gutter) 75px;
}

.linen-range-heading {
  max-width:720px;
  margin-bottom:32px;
}

.linen-range-heading h2 {
  margin-bottom:18px;
}

.linen-range-heading p,.linen-range-grid p {
  color:var(--muted);
}

.linen-range-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px 24px;
}

.linen-range-grid figure {
  margin:0;
  min-width:0;
}

.linen-range-grid img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  background:#e8e7e4;
  border-radius:20px;
}

.linen-range-grid figcaption {
  padding-top:22px;
}

.linen-range-grid h3 {
  font-size:22px;
  margin-bottom:8px;
}

.linen-range-grid figcaption p {
  font-size:16px;
  line-height:1.45;
}

.linen-range-grid p {
  margin-bottom:0;
}

.linen-range-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  min-height:48px;
  margin-top:28px;
  padding-block:8px;
  border-bottom:1px solid var(--blue);
  font-weight:500;
}

@media(max-width:1080px) {
  .linen-range-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Two across rather than one: eight products in a single column is a long scroll past near-identical
   white linen, and the tiles stay legible because the caption shrinks with them. */
@media(max-width:720px) {
  .linen-range-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 16px;
  }
  .linen-range-grid h3 {
    font-size:19px;
  }
  .linen-range-grid figcaption {
    padding-top:14px;
  }
  .linen-range-grid figcaption p {
    font-size:15px;
  }
  .linen-range-grid img {
    border-radius:18px;
  }
}

@media(max-width:1050px) {
  .site-header {
    padding-inline:24px;
    gap:20px;
  }
  .site-header nav {
    gap:18px;
  }
  .site-header .brand img {
    width:150px;
  }
  .site-header .nav-cta {
    min-width:0;
    padding-inline:18px;
    gap:14px;
    font-size:14px;
    white-space:nowrap;
  }
  .home-masthead {
    width:90%;
    padding-top:44px;
  }
  .home-intro .light {
    min-width:215px;
  }
  .home-story {
    gap:32px;
  }
}

@media(max-width:760px) {
  .header-shell {
    padding:18px 20px 0;
  }
  .site-header {
    padding:10px 18px 10px 22px;
    min-height:68px;
    gap:0 20px;
    border-radius:34px;
  }
  .site-header .brand img {
    width:145px;
    height:44px;
  }
  .js .menu-toggle {
    border:0;
    padding:8px 12px;
    gap:12px;
    background:transparent;
  }
  .site-header nav {
    gap:0;
    padding-top:10px;
  }
  .site-header nav>a {
    padding:13px 10px;
  }
  .site-header .nav-cta {
    margin-bottom:8px;
  }
  .nav-services summary {
    padding:13px 10px;
    border-top:1px solid var(--line);
  }
  .services-menu {
    position:static;
    box-shadow:none;
    border:0;
    background:#f0ede8;
    min-width:0;
    margin:0 0 10px;
    padding:8px;
  }
  .site-header .services-menu a {
    padding:12px 12px 12px 18px;
    border:0;
  }
  .site-header .services-menu a+a {
    border-top:1px solid var(--line);
  }
  .home-masthead {
    padding-top:38px;
    width:92%;
  }
  .home-location {
    font-size:10px;
    margin-bottom:20px;
  }
  .home-intro {
    padding-top:12px;
    width:58%;
  }
  .desktop-break {
    display:none;
  }
  .home-intro p {
    font-size:16px;
  }
  .home-intro .light {
    min-width:0;
    gap:24px;
    padding:10px 20px;
    min-height:48px;
    font-size:14px;
  }
  .home-panorama {
    border-radius:20px;
  }
  .home-panorama img {
    aspect-ratio:2.5;
  }
  .home-values {
    font-size:13px;
    padding:23px 0 28px;
  }
  .home-story {
    grid-template-columns:1fr;
    gap:28px;
    padding:40px 6% 0;
    width:100%;
  }
  .home-story h2 {
    grid-column:1;
    font-size:clamp(50px,8vw,67px);
  }
  .home-finishing {
    grid-column:1;
    grid-row:2;
  }
  .home-finishing img {
    aspect-ratio:2.2;
  }
  .home-story-copy {
    grid-column:1;
    grid-row:3;
    margin-top:0;
    max-width:540px;
    font-size:18px;
  }
  .home-story-copy .text-link {
    max-width:360px;
    font-size:18px;
  }
  .home-close {
    width:auto;
    margin-inline:4.5%;
    padding:22px 28px;
    margin-top:36px;
    margin-bottom:40px;
    gap:20px;
  }
  .home-close .button {
    min-width:0;
    gap:18px;
    font-size:14px;
    padding:10px 20px;
  }
}

@media(max-width:600px) {
  :root {
    --hero-type:clamp(26px,8.5vw,52px);
  }
  .home-hero {
    padding-inline:18px;
    border-radius:0 0 36px 36px;
  }
  .home-masthead {
    width:94%;
    padding-bottom:26px;
  }
  .home-masthead h1 {
    letter-spacing:-.045em;
    line-height:1.08;
  }
  .headline-sorted {
    margin-top:3px;
  }
  .home-intro {
    width:100%;
    margin-top:24px;
    padding:0;
  }
  .home-intro p {
    max-width:330px;
    font-size:16px;
    margin-bottom:18px;
  }
  .home-intro .light {
    min-height:48px;
    min-width:200px;
  }
  .home-panorama img {
    aspect-ratio:2.4;
    object-position:50% 62%;
  }
  .home-values {
    font-size:14px;
    gap:0;
    padding:23px 0 27px;
    letter-spacing:-.02em;
  }
  .home-values li {
    padding-inline:6px;
  }
  .home-values li span {
    display:block;
  }
  .home-story {
    padding-inline:20px;
  }
  .home-story h2 {
    font-size:clamp(42px,9.8vw,60px);
    line-height:1.04;
    letter-spacing:-.03em;
  }
  .home-finishing {
    border-radius:18px;
  }
  .home-finishing img {
    aspect-ratio:1.7;
  }
  .home-close {
    border-radius:26px;
    margin-inline:20px;
    padding:26px;
  }
  .home-close .button {
    min-width:210px;
  }
}

@media(min-width:1051px) {
  .site-header nav {
    width:66%;
    max-width:700px;
    justify-content:space-between;
    font-size:14px;
  }
  .site-header .nav-cta {
    min-width:220px;
    font-size:16px;
  }
  .home-intro .button,.home-close .button {
    font-size:16px;
  }
  .home-intro .light {
    min-width:220px;
  }
}

/* Issue #69 (D69-6): readable navigation. Breakpoints stay at 760/1050. */
.phone-icon,.mail-icon { width:20px; height:20px; flex:none; }
.header-phone { display:none; align-items:center; color:var(--blue); }
@media(min-width:1051px) {
  /* 16px labels and Insights do not fit the earlier 66%/700px cap, so the nav takes the free
     space in the capsule instead. */
  .site-header nav { font-size:16px; font-weight:600; width:auto; max-width:none; flex:0 1 860px; }
}
@media(min-width:761px) and (max-width:1050px) {
  .site-header nav { font-size:15px; font-weight:600; gap:12px; }
}
@media(max-width:760px) {
  .site-header { column-gap:6px; }
  .header-phone { display:inline-flex; margin-left:auto; padding:9px; }
  .header-phone .phone-icon { width:22px; height:22px; }
}
@media(max-width:380px) {
  .site-header .brand img { width:110px; height:auto; }
  .header-phone { padding:7px; }
  .js .menu-toggle { padding:8px; gap:8px; }
}

/* Header refresh (owner request 2026-10-07, local prototype). A slim contact row above the
   capsule gives direct email and phone, so the capsule keeps only page links and one solid
   quote button. Services opens on hover (see clientJs). */
/* A whole-pixel line height keeps the header's bottom edge on a pixel boundary, so no faint
   seam shows where the header meets a hero of the same colour. */
.header-utility { display:flex; justify-content:flex-end; gap:28px; max-width:var(--content-width); margin:0 auto 10px; padding:0 24px; font-size:14px; line-height:20px; }
.header-utility a { display:inline-flex; align-items:center; gap:8px; color:var(--blue); }
.header-utility .utility-phone { font-weight:600; }
.is-home .header-utility a { color:#e2eef7; }
.utility-icon { width:16px; height:16px; flex:none; }
.nav-email { display:none; }
.nav-services[open] .services-menu { animation:services-menu-in .16s ease-out; }
@keyframes services-menu-in { from { opacity:0; transform:translateY(-6px); } }
.site-header .nav-cta { font-weight:700; letter-spacing:.01em; box-shadow:0 6px 16px #06366b2e; transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; }
.site-header .nav-cta:hover { background:#0b4d90; box-shadow:0 12px 26px #06366b4d; }
.site-header .nav-cta .arrow-icon { transition:transform .2s; }
.site-header .nav-cta:hover .arrow-icon { transform:translateX(4px); }
@media(prefers-reduced-motion:reduce) {
  .nav-services[open] .services-menu { animation:none; }
  .site-header .nav-cta .arrow-icon { transition:none; }
}
@media(min-width:761px) {
  .header-shell { padding-top:8px; }
  .header-utility { margin-bottom:8px; }
}
@media(min-width:1051px) {
  /* Logo 56px tall (3.5x the 16px menu text, the 900x270 artwork ratio kept), up from 48px. */
  .site-header .brand img { width:187px; height:56px; }
  /* Logo left, page links centred between logo and button, quote button right. */
  .site-header nav { flex:1 1 auto; justify-content:flex-start; gap:30px; }
  .site-header nav > a:first-child { margin-left:auto; }
  .site-header .nav-cta { margin-left:auto; min-width:0; gap:12px; padding:12px 22px 12px 26px; }
}
@media(min-width:821px) and (max-width:1050px) {
  .site-header .nav-cta { font-size:15px; }
}
@media(min-width:761px) and (max-width:820px) {
  /* Narrow tablets: drop the arrow rather than squeezing the page links together. */
  .site-header .nav-cta { padding-inline:16px; }
  .site-header .nav-cta .arrow-icon { display:none; }
}
@media(max-width:760px) {
  .header-utility { display:none; }
  /* Phones: logo 48px tall down to 360px wide; the narrowest phones keep Logo, phone and Menu on one row. */
  .site-header .brand img { width:160px; height:48px; }
  .site-header nav .nav-email { display:flex; align-items:center; gap:10px; }
  /* Rounded corners bent the divider lines between the stacked service links. */
  .site-header .services-menu a { border-radius:0; }
}

/* About: one wide photograph of the floor beside the capacity copy. The machine-by-machine
   detail lives on Inside our laundry, so this page shows the plant once rather than twice. */
.about-plant-photo { margin:0; }
.about-plant-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:20px; background:var(--soft); }

/* Two customer comments, quoted from the current brochure. */
.about-quotes { display:grid; gap:clamp(18px,2.5vw,28px); }
@media(min-width:761px) { .about-quotes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.about-quote { margin:0; padding:clamp(22px,3vw,30px); border:1px solid var(--line); border-radius:20px; background:var(--soft); }
.about-quote blockquote { margin:0; font-size:clamp(17px,1.5vw,19px); line-height:1.5; }
.about-quote figcaption { margin-top:14px; font-size:14px; color:var(--muted); }

.laundry-banner {
  width:100%;
  max-width:calc(var(--content-width) + 2 * var(--content-gutter));
  margin:0 auto clamp(36px,4.5vw,60px);
  padding-inline:var(--content-gutter);
}

.laundry-banner img { display:block; width:100%; height:auto; border-radius:20px; }

/* Inside our laundry: one machine per cell, photo over a short explanation. Two columns once
   there is room for the photographs to stay legible, one below that. */
.equipment-list {
  display:grid;
  gap:clamp(32px,4vw,56px);
  width:100%;
  max-width:calc(var(--content-width) + 2 * var(--content-gutter));
  margin-inline:auto;
  padding:0 var(--content-gutter) clamp(48px,6vw,80px);
}

@media(min-width:861px) {
  .equipment-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.equipment-item { margin:0; }
.equipment-item img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:20px; background:var(--soft); }
.equipment-item figcaption { padding-top:18px; }
.equipment-item h2 { font-size:clamp(22px,2.2vw,28px); line-height:1.2; margin:0 0 10px; }
.equipment-item p { color:var(--muted); max-width:46ch; }

/* Floating quote button, bottom right where visitors expect contact buttons and where it covers
   the least left-aligned text. Hidden (and unfocusable) until clientJs finds no other quote link
   or the footer on screen; without JavaScript it stays hidden and the header button remains. */
/* Appears with a small spring (rises and grows from its corner), leaves with a quick drop and fade. */
.float-cta { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:30; display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:12px 22px 12px 26px; border-radius:999px; background:var(--blue); color:#fff; font-size:16px; font-weight:700; letter-spacing:.01em; box-shadow:0 0 0 2px #fcfaf6e6,0 12px 28px #021c3a59; visibility:hidden; opacity:0; transform:translateY(28px) scale(.9); transform-origin:right bottom; transition:opacity .2s ease-in,transform .26s ease-in,visibility 0s linear .26s,box-shadow .2s,background-color .2s; }
.float-cta.is-visible { visibility:visible; opacity:1; transform:none; transition:opacity .28s ease-out,transform .55s cubic-bezier(.34,1.45,.64,1),visibility 0s,box-shadow .2s,background-color .2s; }
.float-cta::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.float-cta.is-intro::after { animation:float-cta-ring 1.3s ease-out .4s 2; }
@keyframes float-cta-ring { from { box-shadow:0 0 0 0 #06366b66; } to { box-shadow:0 0 0 16px #06366b00; } }
.float-cta:hover { background:#0b4d90; box-shadow:0 0 0 2px #fcfaf6e6,0 16px 32px #021c3a66; }
.float-cta .arrow-icon { filter:invert(1); transition:transform .2s; }
.float-cta:hover .arrow-icon { transform:translateX(4px); }
/* The homepage is navy throughout, so it uses the light button style of its hero instead. */
.is-home .float-cta { background:#e2eef7; color:var(--blue); box-shadow:0 12px 28px #021c3a73; }
.is-home .float-cta:hover { background:#fff; box-shadow:0 16px 32px #021c3a80; }
.is-home .float-cta .arrow-icon { filter:none; }
@media(max-width:760px) {
  .float-cta { right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); min-height:48px; padding:10px 18px 10px 22px; font-size:15px; gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .float-cta,.float-cta.is-visible,.float-cta .arrow-icon { transition:none; }
  .float-cta.is-intro::after { animation:none; }
}
@media print {
  .float-cta,.skip-link,.header-shell,.site-footer,.band { display:none; }
}

/* Keeps a hyphenated phrase such as "day-to-day" on one line. */
.nowrap { white-space:nowrap; }

/* Policy text keeps a readable line length instead of running the full container width. */
.form-shell > .article-body { max-width:72ch; }

/* Tablets: two article cards per row, the closing band stacks so its heading keeps a readable
   measure, and split headings drop their desktop line break (each <br> is followed by a space). */
@media(min-width:761px) and (max-width:1050px) {
  .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .band { grid-template-columns:minmax(0,1fr); gap:18px; }
  .split { gap:48px; }
  .split h2 br { display:none; }
}

/* While the phone menu is open the page behind it stays still and the header is solid. */
@media(max-width:760px) {
  html.menu-open { overflow:hidden; }
  html.menu-open .header-shell { background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* The floating button stays at the end of the page; the footer keeps clear space beneath its
   links for it. */
.has-float-cta .site-footer { padding-bottom:100px; }
@media(max-width:760px) {
  .has-float-cta .site-footer { padding-bottom:88px; }
}

/* Product and facility photos zoom gently inside their frame when a mouse rests on them. */
.photo-zoom { overflow:hidden; }
.photo-zoom img { display:block; transition:transform .45s ease; }
.linen-range-grid .photo-zoom { border-radius:20px; }
@media(hover:hover) {
  .linen-range-grid figure:hover .photo-zoom img,.factory-gallery figure:hover .photo-zoom img,
  .factory-service-photo:hover .photo-zoom img,.chapter-story .photo-zoom:hover img { transform:scale(1.05); }
}
.accommodation-capability .photo-zoom { border-radius:20px; }
@media(max-width:720px) {
  .linen-range-grid .photo-zoom { border-radius:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .photo-zoom img { transition:none; }
}

/* Arrow links: one quiet line at rest; on hover or keyboard focus a solid line grows in from the
   left and the arrow slides, instead of the global hover underline adding a second line. The
   border keeps its 1px of layout but turns transparent; the lines are drawn over it. */
a.chapter-link,a.text-link,a.linen-range-link { position:relative; border-bottom-color:transparent; }
a.chapter-link::before,a.text-link::before,a.linen-range-link::before,
a.chapter-link::after,a.text-link::after,a.linen-range-link::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:currentColor; pointer-events:none; }
a.chapter-link::before,a.text-link::before,a.linen-range-link::before { opacity:.4; }
a.chapter-link::after,a.text-link::after,a.linen-range-link::after { height:2px; transform:scaleX(0); transform-origin:left center; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
a.chapter-link:hover::after,a.text-link:hover::after,a.linen-range-link:hover::after,
a.chapter-link:focus-visible::after,a.text-link:focus-visible::after,a.linen-range-link:focus-visible::after { transform:scaleX(1); }
a.chapter-link:hover,a.text-link:hover,a.linen-range-link:hover { text-decoration:none; }
a.chapter-link .arrow-icon,a.text-link .arrow-icon,a.linen-range-link .arrow-icon,a.related-insight .arrow-icon { transition:transform .3s ease; }
a.chapter-link:hover .arrow-icon,a.text-link:hover .arrow-icon,a.linen-range-link:hover .arrow-icon,a.related-insight:hover .arrow-icon { transform:translateX(4px); }
/* Whole-card links do not underline their text; the title brightens a little instead. */
a.related-insight:hover,a.post-card:hover { text-decoration:none; }
a.related-insight h3,a.post-card h2 { transition:color .3s ease; }
a.related-insight:hover h3,a.post-card:hover h2,a.related-insight:focus-visible h3,a.post-card:focus-visible h2 { color:#0b4d90; }
@media(prefers-reduced-motion:reduce) {
  a.chapter-link::after,a.text-link::after,a.linen-range-link::after,
  a.chapter-link .arrow-icon,a.text-link .arrow-icon,a.linen-range-link .arrow-icon,a.related-insight .arrow-icon,
  a.related-insight h3,a.post-card h2 { transition:none; }
}

/* One hover language for every text link on the site: a line grows in from the left (as on the
   arrow links above), instead of the static underline the base stylesheet adds on hover.
   Components with their own hover (buttons, cards, logo, menus) are left out; :where() keeps
   this at zero specificity so any component background still wins. */
a:hover { text-decoration:none; }
:where(a:not(.button,.nav-cta,.float-cta,.brand,.footer-brand,.header-phone,.skip-link,.related-insight,.post-card,.service-card,.service-row,.chapter-link,.text-link,.linen-range-link,.services-menu a,.site-header nav > a,.header-utility a,.article-body a,.contact-details a,.back-link,.form-note a,.lead a,.quote-alt a)) { background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0 1px; transition:background-size .45s cubic-bezier(.2,.7,.2,1); }
:where(a:not(.button,.nav-cta,.float-cta,.brand,.footer-brand,.header-phone,.skip-link,.related-insight,.post-card,.service-card,.service-row,.chapter-link,.text-link,.linen-range-link,.services-menu a,.site-header nav > a,.header-utility a,.article-body a,.contact-details a,.back-link,.form-note a,.lead a,.quote-alt a)):hover,:where(a:not(.button,.nav-cta,.float-cta,.brand,.footer-brand,.header-phone,.skip-link,.related-insight,.post-card,.service-card,.service-row,.chapter-link,.text-link,.linen-range-link,.services-menu a,.site-header nav > a,.header-utility a,.article-body a,.contact-details a,.back-link,.form-note a,.lead a,.quote-alt a)):focus-visible { background-size:100% 1px; }
/* Header contact row: the line runs under the words, not the icon. */
.header-utility a span { background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0 1px; transition:background-size .45s cubic-bezier(.2,.7,.2,1); }
.header-utility a:hover span,.header-utility a:focus-visible span { background-size:100% 1px; }
/* Links inside sentences (and the Contact page details and lead paragraphs) keep a visible underline at rest (not colour alone); on hover a solid
   line grows over that faint one, so there is never a second line. */
.article-body a,.contact-details a,.back-link,.form-note a,.lead a,.quote-alt a { text-decoration:underline; }
@supports (color:color-mix(in srgb,red 50%,transparent)) {
  .article-body a,.contact-details a,.back-link,.form-note a,.lead a,.quote-guide .quote-alt a { text-decoration:none; background-image:linear-gradient(currentColor,currentColor),linear-gradient(color-mix(in srgb,currentColor 40%,transparent),color-mix(in srgb,currentColor 40%,transparent)); background-position:0 100%,0 100%; background-repeat:no-repeat; background-size:0 1px,100% 1px; transition:background-size .45s cubic-bezier(.2,.7,.2,1); }
  .article-body a:hover,.contact-details a:hover,.back-link:hover,.form-note a:hover,.lead a:hover,.quote-guide .quote-alt a:hover,
  .article-body a:focus-visible,.contact-details a:focus-visible,.back-link:focus-visible,.form-note a:focus-visible,.lead a:focus-visible,.quote-guide .quote-alt a:focus-visible { background-size:100% 1px,100% 1px; }
}
/* Desktop navigation: the same growing line, and a full line marks the current page. */
@media(min-width:761px) {
  .site-header nav > a:not(.nav-cta):not(.nav-email),.nav-services summary { position:relative; }
  .site-header nav > a:not(.nav-cta):not(.nav-email)::after,.nav-services summary::before { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
  .nav-services summary::before { bottom:8px; }
  .site-header nav > a:not(.nav-cta):not(.nav-email):hover::after,.site-header nav > a:not(.nav-cta):not(.nav-email):focus-visible::after,.site-header nav > a:not(.nav-cta):not(.nav-email)[aria-current]::after,
  .nav-services summary:hover::before,.nav-services summary:focus-visible::before,.nav-services[open] summary::before,.nav-services.is-current summary::before { transform:scaleX(1); }
  .site-header nav [aria-current],.site-header nav > a:hover,.nav-services summary:hover { text-decoration:none; }
}
@media(prefers-reduced-motion:reduce) {
  :where(a),.header-utility a span,.article-body a,.contact-details a,.back-link,.form-note a,.lead a,.quote-guide .quote-alt a,
  .site-header nav > a::after,.nav-services summary::before { transition:none; }
}

/* Buttons keep their colours on hover and move instead: they lift a little, the shadow deepens
   and the arrow slides; pressing settles them back down. */
.button { transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; }
.button:hover,.site-header .nav-cta:hover,.float-cta.is-visible:hover { transform:translateY(-2px); }
.button:active,.site-header .nav-cta:active,.float-cta.is-visible:active { transform:translateY(0); transition-duration:.05s; }
.button.primary:hover { box-shadow:0 10px 22px #06366b40; }
.button.secondary:hover { box-shadow:0 10px 22px #06366b26; }
.button.light:hover { background:#fff; box-shadow:0 12px 26px #021c3a66; }
.button .arrow-icon { transition:transform .2s ease; }
.button:hover .arrow-icon { transform:translateX(4px); }
@media(prefers-reduced-motion:reduce) {
  .button:hover,.site-header .nav-cta:hover,.float-cta.is-visible:hover,.button:hover .arrow-icon { transform:none; }
}

@media(max-width:359px) {
  .site-header .brand img { width:120px; height:36px; }
}

/* Flat header (owner request 2026-10-07): one full-width white bar with a single hairline instead of
   a floating pill, so the quote button is the only rounded shape. The logo, menu and contact row
   align with the page column below; the same bar on every page and at every width. */
.header-shell { background:#fff; border-bottom:1px solid #06366b14; }
.site-header { background:transparent; box-shadow:none; border-radius:0; padding-inline:0; }
.header-utility { padding-inline:0; margin-bottom:0; }
@media(min-width:761px) {
  .header-shell { padding-top:10px; }
  .site-header { min-height:72px; }
  /* Whole-pixel line height keeps the bar's bottom edge on a pixel boundary at every width. */
  .site-header nav,.nav-services summary { line-height:24px; }
}
@media(max-width:760px) {
  .header-shell { padding-top:6px; }
  .site-header { border-radius:0; padding-inline:0; }
}

/* Header on scroll (owner request 2026-10-07, after the Johnsons site): sticky at the top, it slides
   away while reading down (.is-hidden) and back when scrolling up, frosted and lightly shadowed
   over content (.is-scrolled). In-page links land below it. */
.header-shell { position:sticky; top:0; z-index:40; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background-color .3s ease; }
html .header-shell.is-scrolled { background:#fffffff2; box-shadow:0 10px 30px #06366b14; }
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
  html .header-shell.is-scrolled { background:#ffffffd6; -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); }
}
.header-shell.is-hidden { transform:translateY(calc(-100% - 2px)); box-shadow:none; }
html { scroll-padding-top:120px; }
@media(max-width:760px) {
  html { scroll-padding-top:88px; }
}
@media(prefers-reduced-motion:reduce) {
  .header-shell { transition:none; }
}

/* Content is now held in the page column by --gutter, so large screens no longer need the old
   1800px cap; backgrounds such as the pale page hero run edge to edge. */
@media(min-width:1600px) {
  main,.site-footer { max-width:none; }
}
/* The article is its own centred 900px reading column, so it keeps the plain side gutter. */
.article { padding-inline:var(--content-gutter); }

/* Scroll reveal: below-the-fold cards and photos rise 28px into place as they arrive (clientJs adds
   .reveal-ready and .is-revealed); photos also settle from a slight zoom inside their frame. The
   individual translate/scale properties leave hover transforms free. Text is never faded. */
.reveal-live .reveal-item { transition:translate .8s cubic-bezier(.2,.7,.2,1); }
.reveal-ready .reveal-item:not(.is-revealed) { translate:0 28px; }
.reveal-live .photo-zoom.reveal-item img { transition:transform .45s ease,scale 1.2s cubic-bezier(.2,.7,.2,1); }
.reveal-ready .photo-zoom.reveal-item:not(.is-revealed) img { scale:1.08; }

/* Blog cards: a navy line grows along the bottom edge (owner: one line, at the bottom; no repeated "Read article"). */
.post-card { position:relative; }
.post-card::before { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left center; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.post-card:hover::before,.post-card:focus-visible::before { transform:scaleX(1); }
/* Blog search and topic filter (owner request 2026-10-07): instant, in the browser, no tracking. */
.blog-tools { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:0 var(--gutter) 32px; }
.blog-tools[hidden],.post-card[hidden],.blog-empty[hidden] { display:none; }
.blog-search { position:relative; flex:1 1 280px; max-width:420px; }
.blog-search svg { position:absolute; left:17px; top:50%; translate:0 -50%; color:var(--muted); pointer-events:none; }
.blog-search input { width:100%; min-height:48px; padding:10px 18px 10px 46px; border:1px solid #7f91a6; border-radius:999px; background:#fff; color:var(--blue); font:inherit; font-size:16px; transition:border-color .2s,box-shadow .2s; }
.blog-search input::placeholder { color:var(--muted); }
.blog-search input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px #06366b1f; }
.blog-filters { display:flex; flex-wrap:wrap; gap:8px; }
.blog-filter { min-height:40px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--blue); font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background-color .2s,border-color .2s,color .2s; }
.blog-filter:hover { border-color:var(--blue); }
.blog-filter[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; }
.blog-count { margin:0 0 0 auto; font-size:14px; color:var(--muted); white-space:nowrap; }
.blog-empty { margin:0; padding:0 var(--gutter) 80px; font-size:17px; color:var(--muted); }
.blog-empty button { padding:0; border:0; background:none; color:var(--blue); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
@media(max-width:760px) {
  .blog-search { max-width:none; flex-basis:100%; }
  .blog-count { margin-left:0; flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .blog-search input,.blog-filter { transition:none; }
}
/* Related-insight cards lift a little under the mouse. */
.related-insight { transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease; }
.related-insight:hover { transform:translateY(-4px); box-shadow:0 14px 30px #06366b14; }
@media(prefers-reduced-motion:reduce) {
  .post-card::before,.related-insight { transition:none; }
  .related-insight:hover { transform:none; }
}

/* Footer (owner request 2026-10-07): the brand line sits quietly under the Logo, and the middle
   carries useful links (services, company, contact) instead of a lone slogan. The base
   stylesheet's footer grid placement is reset for these columns. */
.footer-top { grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); align-items:start; gap:clamp(28px,4vw,64px); padding-bottom:16px; }
.footer-top p { grid-column:auto; grid-row:auto; }
.footer-brand-block { display:grid; gap:16px; justify-items:start; }
.footer-top .footer-tagline { font-size:15px; line-height:1.5; letter-spacing:0; color:var(--muted); }
/* Copyright sits with the brand and Privacy joins the Company links, so no separate bottom row. */
.footer-top .footer-copy { font-size:15px; line-height:1.5; letter-spacing:0; color:var(--muted); }
.footer-col { display:grid; gap:12px; align-content:start; justify-items:start; }
.footer-top .footer-heading { margin:0 0 4px; font-size:13px; font-weight:600; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.footer-col a { font-size:16px; color:var(--blue); }
.footer-contact .footer-phone { font-size:19px; font-weight:600; letter-spacing:-.01em; }
.footer-contact .footer-phone,.footer-contact .footer-email { grid-column:auto; }
.footer-top .footer-address { font-size:15px; line-height:1.5; letter-spacing:0; color:var(--muted); }
/* Capitalised labels keep the brand's own spelling (eWASH, not EWASH). */
.brand-word { text-transform:none; }
/* On the quote page, for people who prefer not to fill in the form. */
.quote-guide .quote-alt { margin-top:28px; font-size:15px; }
.quote-guide .quote-alt a { color:#fff; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
@media(max-width:1050px) {
  .footer-top { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-brand-block { grid-column:1 / -1; }
}
@media(max-width:600px) {
  .footer-top { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
  .footer-contact { grid-column:1 / -1; }
}
@media(max-width:760px) {
  /* The header sticks to the top, so an open menu taller than the screen scrolls inside itself. */
  .js #main-nav.is-open { max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; }
}

/* Issue #69 (D69-2, D69-4): two same-category related articles on service pages. */
.related-insights { padding-inline:var(--gutter); margin-block:0 70px; }
.related-insights.accommodation-shell { padding-inline:var(--content-gutter); margin-block:clamp(48px,6vw,80px) 0; }
.related-insights h2 { font-size:clamp(28px,3vw,36px); line-height:1.2; margin:0 0 24px; text-wrap:balance; }
.related-insights-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.related-insight { display:grid; align-content:start; gap:12px; min-width:0; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--blue); }
.related-insight:hover { border-color:var(--blue); }
.related-insight h3 { margin:0; font-size:22px; line-height:1.3; text-wrap:balance; }
.related-insight p { margin:0; color:var(--muted); }
.related-insight-link { display:inline-flex; align-items:center; gap:12px; margin-top:4px; font-weight:600; }
.related-insight-link .arrow-icon { width:20px!important; height:20px!important; }
@media(max-width:760px) {
  .related-insights-grid { grid-template-columns:minmax(0,1fr); }
  .related-insight { padding:22px; }
}

/* Site review 2026-10-07: list markers that do not read as links, and a quote button in closing bands. */
.check-list li:before { content:''; left:2px; top:calc(17px + .75em - 6px); width:11px; height:6px; border-left:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(-45deg); }
.band .button { margin-top:8px; }
.article .article-cta { margin:56px 0 0; border-radius:20px; }
.article-cta h2 { margin:0; }
.article-cta .linen-range-link { display:flex; width:fit-content; margin-top:20px; }
/* Self-hosted article images keep their ratio below the reading width and share the photo corners. */
.article-image { height:auto; aspect-ratio:3 / 2; border-radius:20px; background:var(--soft); }

/* 404 page (owner request 2026-10-12): the eWASH drop stands in for the zero and bobs twice on arrival (under five seconds, WCAG 2.2.2);
   cards below lead back to the services and Insights. */
.notfound-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,80px); }
.notfound-hero h1 { max-width:760px; }
.notfound-hero .lead { max-width:560px; }
.notfound-art { display:flex; align-items:center; justify-content:center; font-size:clamp(120px,15vw,240px); font-weight:600; line-height:1; letter-spacing:-.06em; color:var(--blue); user-select:none; }
.notfound-drop { position:relative; display:inline-block; width:.72em; height:.9em; margin:0 .04em 0 .02em; }
.notfound-drop img { display:block; width:100%; height:100%; object-fit:contain; animation:notfound-bob 2.4s ease-in-out 2; }
.notfound-drop::after { content:""; position:absolute; left:22%; right:22%; bottom:-.07em; height:.05em; border-radius:50%; background:#06366b2e; animation:notfound-shadow 2.4s ease-in-out 2; }
@keyframes notfound-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.07em); } }
@keyframes notfound-shadow { 0%,100% { transform:scaleX(1); opacity:1; } 50% { transform:scaleX(.75); opacity:.55; } }
.notfound-next { padding-inline:var(--gutter); margin-block:0 clamp(56px,7vw,96px); }
.notfound-next h2 { font-size:clamp(28px,3vw,36px); line-height:1.2; margin:0 0 24px; }
.notfound-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
/* Same look as the service pages' insight cards; links line up along the bottom edge. */
.notfound-card { display:grid; grid-template-rows:auto 1fr auto; gap:12px; min-width:0; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--paper); background-image:none; color:var(--blue); transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease; }
.notfound-card:hover { border-color:var(--blue); transform:translateY(-4px); box-shadow:0 14px 30px #06366b14; text-decoration:none; }
.notfound-card h3 { margin:0; font-size:22px; line-height:1.3; text-wrap:balance; transition:color .3s ease; }
.notfound-card:hover h3,.notfound-card:focus-visible h3 { color:#0b4d90; }
.notfound-card p { margin:0; color:var(--muted); }
.notfound-card-link { display:inline-flex; align-items:center; gap:12px; margin-top:4px; font-weight:600; }
.notfound-card-link .arrow-icon { width:20px!important; height:20px!important; transition:transform .3s ease; }
.notfound-card:hover .arrow-icon { transform:translateX(4px); }
@media(max-width:1050px) {
  .notfound-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .notfound-hero { grid-template-columns:minmax(0,1fr); gap:8px; }
  .notfound-art { order:-1; justify-content:flex-start; font-size:96px; margin-bottom:16px; }
}
@media(max-width:560px) {
  .notfound-grid { grid-template-columns:minmax(0,1fr); }
  .notfound-card { padding:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .notfound-drop img,.notfound-drop::after { animation:none; }
  .notfound-card,.notfound-card h3,.notfound-card-link .arrow-icon { transition:none; }
  .notfound-card:hover,.notfound-card:hover .arrow-icon { transform:none; }
}

/* Heritage mark (owner request 2026-10-14): "EST. 2005" on one line after the "H", its letters
   standing on the same line as "WASH". In the logo artwork the foot of "WASH" sits 24.6% of the image
   height above its bottom edge; the grid rows put the mark there at every logo size. */
.site-header .brand { display:inline-flex; align-items:stretch; }
.brand-est { display:grid; grid-template-rows:75.4fr auto 24.6fr; margin-left:6px; color:var(--blue); font-size:11px; font-weight:700; line-height:1; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.brand-est > span { grid-row:2; }
@media(max-width:760px) {
  .brand-est { margin-left:4px; font-size:10px; letter-spacing:.12em; }
}
/* Small phones keep Logo, mark, phone and Menu on one row. */
@media(max-width:400px) {
  .site-header .brand img { width:132px; height:auto; }
}
@media(max-width:359px) {
  .site-header .brand img { width:108px; height:auto; }
}

/* Technology is one story, not two blocks (owner, 2026-10-16: "合并一下"): the copy and its three
   points sit above a single screenshot of the system, instead of a two-column layout that left a
   tall empty column and pushed the screenshot into a separate block below. */
.technology { padding:0 var(--gutter) 75px; }
.technology-intro { max-width:760px; }
.technology-intro h2 { font-size:clamp(30px,3.4vw,38px); line-height:1.1; margin:0 0 18px; }
.technology-intro p { color:var(--muted); margin:0; }
.technology-points { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:44px; }
.technology-shot { margin:48px 0 0; }
.technology-shot .photo-zoom { border-radius:20px; }
.technology-shot img { display:block; width:100%; height:auto; }
.technology-shot figcaption { padding-top:14px; font-size:14px; color:var(--muted); }
@media(max-width:860px) {
  .technology-points { grid-template-columns:minmax(0,1fr); gap:26px; margin-top:34px; }
  .technology-shot { margin-top:34px; }
}

/* Our history (owner request 2026-10-14): a dated list, so the years the brothers built the business
   and the February 2025 handover each stand on their own. One layout at every width. */
.about-history { padding:0 var(--gutter) 75px; }
.history-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 34px; }
.about-history h2 { font-size:clamp(30px,3.4vw,38px); margin:0; }
/* Prev/Next step one card at a time (owner request 2026-10-15: "一个模块一个模块的一个滚动"), for
   anyone who would rather click than drag or wait for the auto-advance. */
.history-nav { display:flex; gap:10px; flex:none; }
.history-nav button { display:grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--blue); cursor:pointer; transition:border-color .2s ease,background-color .2s ease; }
.history-nav button .arrow-icon { width:18px!important; height:18px!important; }
.history-nav [data-history-prev] .arrow-icon { transform:scaleX(-1); }
.history-nav button:hover:not(:disabled) { border-color:var(--blue); background:#eef4fa; }
.history-nav button:focus-visible { outline:3px solid #cc6a00; outline-offset:3px; }
.history-nav button:disabled { opacity:.35; cursor:default; }
/* A horizontal, scrollable timeline (owner request 2026-10-15): cards run left to right along one
   connecting line, instead of stacking. The container is its own scroll region (not the page) so the
   row can auto-advance without moving anything else, and a focusable region (keyboard users can
   scroll it with arrow keys) keeps it reachable even without the visible scrollbar the Prev/Next
   buttons make unnecessary (owner request 2026-10-16). Snapping is mandatory, not proximity, so a
   drag, swipe or wheel scroll always lands on a whole card. */
.history-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding:28px 4px 20px; scrollbar-width:none; }
.history-scroll::-webkit-scrollbar { display:none; }
.history-scroll:focus-visible { outline:3px solid #cc6a00; outline-offset:4px; border-radius:4px; }
/* One continuous rail with a marker per entry, so the row reads as a timeline. The old per-card
   stub lines (owner, 2026-10-16: "这一排是什么意思") just looked like stray marks. */
.history-line { list-style:none; margin:0; padding:0; display:flex; gap:40px; width:max-content; position:relative; }
.history-line::before { content:""; position:absolute; left:5px; right:5px; top:5px; height:1px; background:#06366b2e; }
.history-line li { position:relative; flex:0 0 300px; padding-top:26px; scroll-snap-align:start; }
.history-line li::before { content:""; position:absolute; left:0; top:0; width:11px; height:11px; border-radius:50%; background:var(--blue); z-index:1; }
/* Each entry is its own card, not just text in a row, so it reads as a distinct block and can lift
   under the mouse the way the site's other cards (related-insight, notfound-card) already do. Each
   one carries a real eWASH photo (owner request 2026-10-16, "有图有真相"). */
.history-card { height:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease; }
.history-card img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:#e8e7e4; }
.history-card-body { padding:22px 22px 24px; }
.history-line li:hover .history-card { border-color:var(--blue); transform:translateY(-4px) scale(1.035); box-shadow:0 16px 34px #06366b1f; }
.history-year { margin:0 0 8px; font-size:13px; font-weight:600; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.history-line h3 { font-size:22px; margin:0 0 10px; }
.history-line p:last-child { margin:0; color:var(--muted); }
@media(max-width:760px) {
  .history-line li { flex-basis:260px; }
}
@media(prefers-reduced-motion:reduce) {
  .history-scroll { scroll-behavior:auto; }
  .history-line li:hover .history-card { transform:none; }
}

/* Map of our service area (owner request 2026-10-14): styled as the same figure/figcaption the
   factory photos below use, in the same .split rhythm as the sections above and below it, so it
   reads as one more photo on the page rather than a separately designed card. */
.service-area-map { display:block; max-width:460px; text-decoration:none; }
.service-area-map figure { margin:0; }
.service-area-map .photo-zoom { border-radius:20px; transition:box-shadow .2s ease, transform .2s ease; }
.service-area-map:hover .photo-zoom, .service-area-map:focus-visible .photo-zoom { box-shadow:0 12px 28px #06366b26; transform:translateY(-2px); }
.service-area-map svg { width:100%; height:auto; display:block; }
.service-area-map figcaption { display:flex; align-items:center; gap:8px; padding-top:14px; font-size:14px; font-weight:600; color:var(--blue); }
.service-area-map figcaption .arrow-icon { width:16px; height:16px; }
@media(max-width:1050px) {
  .service-area-map { max-width:440px; margin:0 auto; }
}

/* Touch targets (owner asked 2026-10-15 whether iPhone and iPad are properly handled). Layout and
   breakpoints measured clean across 341 width/page combinations, but several links sat between
   20px and 26px tall: under the 24px WCAG 2.2 minimum for the utility bar, the contact details and
   the quote step buttons, and under what a thumb comfortably hits for the rest. The mobile menu was
   already fine at 53px, so this only lifts what a finger has to reach. Scoped to coarse pointers so
   the mouse layout, where these sizes are not a problem, stays exactly as designed. */
@media (hover:none) and (pointer:coarse) {
  .header-utility a,
  .footer-col a,
  .back-link,
  .contact-details p a,
  .quote-guide [data-quote-goto] {
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  /* The links grew into their own spacing, so the gaps between them come back down and the
     columns keep roughly the height they had. */
  .footer-col { gap:0; }
  .quote-guide ol { gap:0 14px; }
  /* The header nav takes padding rather than a height: between 761px and the desktop layout a
     tablet still gets the full row, and making these flex items widened the row enough to push it
     off a landscape phone. Vertical padding on an inline link grows the area a finger hits without
     touching how wide the row measures. */
  .site-header nav > a,
  .site-header nav summary { padding-block:10px; }
  /* These two already sit at 40px and 43px, a hair under the finger-sized mark. */
  .site-header .header-phone { min-width:44px; min-height:44px; }
  .float-cta { min-height:44px; }
}