/* ==========================================================================
   JDN Property Services Ltd — "The Damp Line"
   --------------------------------------------------------------------------
   A survey sheet. White paper, ink band, oxide band. A cut through an
   external wall in the hero, annotated in mono; short dashed damp-line
   segments beside every section heading.

   GROUND: solid #ffffff. No bone, no cream, no warm off-white anywhere.
   Sections alternate white → ink → oxide. `--plaster` is used only for
   drawing fills and small functional blocks.
   ========================================================================== */

:root{
  /* ---------- palette, from the brief ---------- */
  --ink:        #17120f;
  --ink-2:      #1d1714;
  --ink-3:      #241d19;
  --white:      #ffffff;
  --oxide:      #a0432a;
  --oxide-lit:  #c4674a;
  --oxide-pale: #e3b09a;
  --steel:      #6b615a;
  --plaster:    #f5f3f1;

  /* ---------- base.css contract ---------- */
  --surface:    #ffffff;
  --surface-2:  #ffffff;
  --text:       #f7f3f0;
  --muted:      rgba(247,243,240,.6);
  --ink-text:   #17120f;
  --ink-mute:   #6b615a;
  --accent:     #a0432a;
  --accent-lit: #c4674a;
  --accent-2:   #a0432a;

  --line:       rgba(23,18,15,.14);
  --line-d:     rgba(23,18,15,.26);

  /* ---------- type ---------- */
  --font-display: "Trirong", Georgia, "Times New Roman", serif;
  --font-body:    "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Cousine", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap-max: 1260px;
  --pad:      clamp(1.15rem, 4vw, 2.6rem);
  --radius:   0px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:88px; }
body{
  background:var(--white);
  color:var(--ink);
  font-size:17px;
  line-height:1.66;
  font-weight:400;
}
::selection{ background:var(--oxide); color:#fff; }
:focus-visible{ outline:2px solid var(--oxide); outline-offset:3px; }

.skip{
  position:absolute; left:1rem; top:.6rem; z-index:10000;
  padding:.65rem 1rem; background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; transform:translateY(-240%);
  transition:transform .2s var(--ease);
}
.skip:focus{ transform:none; }

/* ---------- section grounds ---------- */
.sect--light{ background:var(--white); color:var(--ink); }
.sect--light + .sect--light{ border-top:1px solid var(--line); }
.sect--ink{
  background:var(--ink); color:var(--text);
  --line:rgba(247,243,240,.16);
  --line-d:rgba(247,243,240,.24);
  --ink-mute:rgba(247,243,240,.66);
}
.sect--oxide{
  background:var(--oxide); color:#fff;
  --line:rgba(255,255,255,.3);
  --line-d:rgba(255,255,255,.4);
  --ink-mute:rgba(255,255,255,.84);
}

/* ---------- the survey-sheet grid: number left, content right ---------- */
.sheet{
  display:grid;
  grid-template-columns:minmax(0,172px) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.4rem);
  align-items:start;
}
.sheet__meta{ min-width:0; }
.sheet__num{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1; font-weight:400; letter-spacing:-.02em;
  color:var(--oxide);
}
.sheet__tag{
  margin-top:.5rem;
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel);
}
.sect--ink .sheet__num,
.sect--oxide .sheet__num{ color:rgba(255,255,255,.9); }
.sect--ink .sheet__tag,
.sect--oxide .sheet__tag{ color:rgba(255,255,255,.62); }
.sheet__body{ min-width:0; }

/* ---------- the damp-line motif: 44–84 px, never a page rail ---------- */
.motif{ display:block; width:22px; height:66px; position:relative; margin-top:1.8rem; }
.motif::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:repeating-linear-gradient(to bottom, var(--oxide) 0 5px, transparent 5px 10px);
}
.motif::after{
  content:""; position:absolute; left:0; top:38%;
  width:10px; height:1px; background:var(--oxide);
}
.motif--s{ height:44px; }
.motif--l{ height:84px; }
.sect--ink .motif::before{
  background:repeating-linear-gradient(to bottom, var(--oxide-pale) 0 5px, transparent 5px 10px);
}
.sect--ink .motif::after{ background:var(--oxide-pale); }
.sect--oxide .motif::before{
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.9) 0 5px, transparent 5px 10px);
}
.sect--oxide .motif::after{ background:#fff; }

/* ---------- headings ---------- */
.sect__h2{
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.sect__head .sect__lead{ margin-top:1rem; }

/* ---------- header extras ---------- */
.hdr__cta{ display:flex; align-items:center; gap:1.1rem; margin-left:1.2rem; flex-shrink:0; }
.hdr__tel{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  color:rgba(247,243,240,.72); white-space:nowrap;
}
.hdr__tel:hover{ color:var(--oxide-pale); }
.hdr__btn{ padding:.6rem 1rem; font-size:.8rem; }
.nav__link:hover{ color:var(--oxide-pale); background:rgba(255,255,255,.06); }
.nav__item.is-open > .nav__link{ color:var(--oxide-pale); }
.mega a:hover{ color:var(--oxide-pale); }
.mega__h{ color:var(--oxide-lit); }
.foot__nav a:hover{ color:var(--oxide-pale); }

/* ---------- buttons ---------- */
.btn{ font-weight:600; letter-spacing:.005em; }
.btn--solid{ background:var(--oxide); color:#fff; }
.btn--solid:hover{ background:#8a3823; transform:translateY(-2px); filter:none; }
.btn--ghost{ border:1px solid var(--line-d); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--oxide); color:var(--oxide); background:transparent; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--white);
  padding-top:clamp(2.2rem,4.5vw,3.6rem);
  padding-bottom:clamp(2.4rem,5vw,4rem);
  border-bottom:1px solid var(--line);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.6rem,4vw,3.6rem);
  align-items:start;
}
.hero__copy{ min-width:0; }
.eyebrow{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-mono); font-size:.63rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  margin-bottom:1.5rem;
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--oxide); flex:none; }
.hero__h1{
  font-size:var(--h1-size, clamp(1.9rem, 6vw, 3.9rem));
  margin-bottom:1.4rem; line-height:.96;
}
/* descenders in Trirong would clip against base.css's overflow:hidden line box */
.hero__h1 .line{ overflow:visible; padding-block:0; }
.hero__lead{
  font-size:clamp(1rem,1.4vw,1.07rem);
  line-height:1.62; color:#3d352f; max-width:46ch;
  overflow-wrap:break-word;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.9rem; }
.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center;
  margin-top:2.2rem;
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.hero__trust li{ display:flex; align-items:center; }
.hero__trust li + li::before{
  content:"/"; color:var(--oxide); margin:0 .85rem; font-size:.85em;
}

/* ---------- the wall section ---------- */
.wall{
  margin:0; min-width:0; width:100%; max-width:520px;
  justify-self:center;
}
.wall__svg{ display:block; width:100%; height:auto; overflow:visible; }
.wall__cap{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.9rem; padding-top:.6rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}
.wall__key{ display:none; }
.wall__key li{ display:flex; align-items:center; gap:.7rem; }
.k{ display:inline-block; width:22px; height:1px; flex:none; }
.k--dash{ background:repeating-linear-gradient(to right, var(--oxide) 0 4px, transparent 4px 8px); }
.k--dpc{ background:var(--ink); height:3px; }
.k--line{ background:var(--line-d); }

.wa{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.12em;
  fill:var(--steel);
  paint-order:stroke; stroke:#fff; stroke-width:2.4px; stroke-linejoin:round;
}
.wa--t{ font-size:10px; fill:rgba(23,18,15,.55); }
.wa--x{ font-size:8px; fill:rgba(23,18,15,.45); }
.wa--o{ fill:var(--oxide); }
.wa--scale{ fill:rgba(23,18,15,.62); letter-spacing:.05em; }

/* ==========================================================================
   01 — WHAT WE TREAT
   ========================================================================== */
.treat{
  display:grid;
  grid-template-columns:repeat(3,minmax(min(220px,100%),1fr));
  gap:0 clamp(1.2rem,2.6vw,2.2rem);
}
.treat__i{ border-top:1px solid var(--line); }
.treat__a{
  display:flex; flex-direction:column; height:100%; min-width:0;
  padding:1.1rem 0 1.6rem;
}
.treat__n{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em;
  color:var(--oxide); margin-bottom:1.7rem;
}
.treat__h{
  font-family:var(--font-display);
  font-size:clamp(1.08rem,1.6vw,1.28rem); font-weight:500;
  line-height:1.2; letter-spacing:-.01em; margin-bottom:.45rem;
  transition:color .2s var(--ease);
}
.treat__p{
  font-size:.9rem; line-height:1.55; color:var(--steel);
  margin-bottom:1.2rem; max-width:34ch;
}
.treat__go{
  margin-top:auto; display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
  transition:color .2s var(--ease);
}
.treat__a:hover .treat__h,
.treat__a:hover .treat__go{ color:var(--oxide); }

/* ==========================================================================
   02 — THE SURVEY (ink)
   ========================================================================== */
.steps{ display:grid; }
.step{
  position:relative; display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:clamp(.8rem,2vw,1.3rem);
  padding-bottom:1.7rem;
}
.step:last-child{ padding-bottom:0; }
.step__n{
  position:relative; z-index:1;
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line-d); border-radius:50%;
  background:var(--ink);
  font-family:var(--font-mono); font-size:.6rem; color:var(--oxide-pale);
}
.step:not(:last-child)::before{
  content:""; position:absolute; left:17px; top:36px; bottom:0; width:1px;
  background:repeating-linear-gradient(to bottom, var(--oxide) 0 5px, transparent 5px 10px);
  opacity:.65;
}
.step__body{ min-width:0; padding-top:.32rem; }
.step__h{
  font-family:var(--font-display); font-size:1.1rem; font-weight:500;
  line-height:1.25; margin-bottom:.2rem;
}
.step__body p{
  font-size:.92rem; line-height:1.6;
  color:rgba(247,243,240,.68); max-width:64ch;
}
.note{
  margin-top:2.2rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.66rem; line-height:1.8;
  letter-spacing:.04em; color:rgba(247,243,240,.55); max-width:62ch;
}

/* ==========================================================================
   03 — RISING DAMP / THE DPC
   ========================================================================== */
.dpc{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.dpc__copy{ min-width:0; }
.dpc__copy p{
  font-size:.97rem; line-height:1.65; color:#3d352f;
  margin-bottom:1rem; max-width:48ch;
}
.dpc__list{ margin-top:1.7rem; border-top:1px solid var(--line-d); }
.dpc__list li{
  display:flex; gap:1rem; padding:.72rem 0;
  border-bottom:1px solid var(--line);
  font-size:.85rem; line-height:1.45; color:var(--steel);
}
.dpc__list span{
  font-family:var(--font-mono); font-size:.56rem;
  color:var(--oxide); padding-top:.22rem; flex:none;
}
.detail{ margin:0; min-width:0; }
.detail__svg{ display:block; width:100%; height:auto; }
.detail__cap{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.7rem; padding-top:.55rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   04 — RESTORATION
   ========================================================================== */
.rest{
  display:grid;
  grid-template-columns:repeat(3,minmax(min(200px,100%),1fr));
  gap:0 clamp(1.2rem,2.6vw,2rem);
}
.rest li{ border-top:1px solid var(--line-d); }
.rest a{
  display:flex; flex-direction:column; height:100%; min-width:0;
  padding:1.15rem 0 1.6rem;
}
.rest__n{
  font-family:var(--font-display); font-style:italic;
  font-size:.9rem; color:var(--oxide); margin-bottom:1.2rem;
}
.rest h3{
  font-family:var(--font-display); font-size:1.14rem; font-weight:500;
  line-height:1.2; margin-bottom:.4rem; transition:color .2s var(--ease);
}
.rest p{
  font-size:.88rem; line-height:1.55; color:var(--steel);
  margin-bottom:1.1rem; max-width:32ch;
}
.rest__go{
  margin-top:auto; display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
  transition:color .2s var(--ease);
}
.rest a:hover h3,
.rest a:hover .rest__go{ color:var(--oxide); }

.wide{ margin:clamp(2rem,4vw,3rem) 0 0; }
.wide img{
  width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center 58%;
  background:var(--plaster);
}
.wide figcaption{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.6rem; padding-top:.5rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   05 — PROOF (oxide)
   ========================================================================== */
.proof{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem); align-items:end;
  padding-bottom:clamp(1.2rem,2.4vw,1.8rem);
}
.proof__big{
  display:flex; align-items:flex-end; gap:.4rem;
  font-family:var(--font-display);
  font-size:clamp(5rem,13vw,9rem); line-height:.78;
  font-weight:600; letter-spacing:-.05em;
}
.proof__big span{
  font-family:var(--font-mono); font-size:.11em; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:.75em; opacity:.85;
}
.proof__line{
  font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.35;
  max-width:20ch; padding-bottom:.55rem; color:rgba(255,255,255,.94);
}
.proof__list{
  display:grid; grid-template-columns:repeat(2,minmax(min(240px,100%),1fr));
  gap:0 clamp(1.4rem,3vw,2.6rem); margin-top:1.6rem;
}
.proof__list li{ border-top:1px solid var(--line); padding:1.1rem 0 1.4rem; min-width:0; }
.proof__k{
  display:block; font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:.5rem;
}
.proof__v{
  display:block; font-family:var(--font-display);
  font-size:1.35rem; font-weight:500; line-height:1.15; margin-bottom:.35rem;
}
.proof__list p{
  font-size:.85rem; line-height:1.5;
  color:rgba(255,255,255,.74); max-width:38ch;
}
.badges{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:2rem; align-items:flex-end; }
.badges figure{
  background:#fff; padding:.7rem .9rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.badges img{ display:block; width:auto; }
.badges figure:first-child img{ height:62px; }
.badges figure:last-child img{ height:24px; }
.badges figcaption{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   06 — COVERAGE
   ========================================================================== */
.isles{ border-top:1px solid var(--line-d); }
.isles__head{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.isles__list{
  display:grid;
  grid-template-columns:repeat(4,minmax(min(120px,100%),1fr));
  gap:0 clamp(1rem,2vw,1.6rem);
}
.isles__list li{
  display:flex; gap:.65rem; min-width:0;
  padding:.62rem 0; border-bottom:1px solid var(--line);
  font-size:.92rem; line-height:1.3;
}
.isles__list span{
  font-family:var(--font-mono); font-size:.54rem;
  color:var(--oxide); padding-top:.3rem; flex:none;
}
.isles__foot{
  margin-top:1.4rem; font-size:.88rem; line-height:1.6;
  color:var(--steel); max-width:64ch;
}

/* ==========================================================================
   07 — IN SITU
   ========================================================================== */
.pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(min(240px,100%),1fr));
  gap:clamp(1rem,2.5vw,1.8rem);
  align-items:start;
}
.pair figure{ margin:0; min-width:0; }
.pair img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--plaster);
}
.pair__a img{ object-position:center; }
.pair__b img{ object-position:46% center; }
.pair figcaption{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.55rem; padding-top:.5rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel);
}
.pair figcaption span:first-child{ max-width:32ch; }
/* in-situ sits on ink: the photo captions and image beds need the light values */
.sect--ink .pair figcaption{ color:rgba(247,243,240,.62); }
.sect--ink .pair img{ background:rgba(255,255,255,.05); }


/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.8rem,4vw,3.4rem);
}
.contact__main{ min-width:0; }
.contact__lead{
  font-size:1rem; line-height:1.6; color:var(--steel);
  max-width:40ch; margin:.8rem 0 1.8rem;
}
.contact__tel{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(2rem,5.4vw,3.4rem); line-height:1;
  font-weight:500; letter-spacing:-.02em;
  color:var(--ink); padding-bottom:.16rem;
  border-bottom:1px solid var(--line-d);
  overflow-wrap:anywhere;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.contact__tel:hover{ color:var(--oxide); border-color:var(--oxide); }
.contact__mail{
  display:block; margin-top:1.15rem;
  font-family:var(--font-mono); font-size:clamp(.76rem,1.6vw,.92rem);
  color:var(--oxide); overflow-wrap:anywhere; word-break:break-word;
}
.contact__note{
  margin-top:1.5rem; max-width:36ch;
  font-family:var(--font-mono); font-size:.6rem; line-height:1.9;
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
}
.contact__side{
  min-width:0; border-top:1px solid var(--line-d); padding-top:1.1rem;
}
.contact__h{
  font-family:var(--font-display); font-size:1.1rem;
  font-weight:500; margin-bottom:.5rem;
}
.contact__addr{
  font-family:var(--font-mono); font-size:.78rem; line-height:1.9;
  color:var(--steel); overflow-wrap:anywhere;
}
.pc{ display:inline-block; color:var(--ink); letter-spacing:.06em; }
.contact__links{
  margin-top:1.7rem; padding-top:1.1rem; border-top:1px solid var(--line);
  display:grid; gap:.55rem;
}
.contact__links a{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  transition:color .2s var(--ease);
}
.contact__links a:hover{ color:var(--oxide); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot__brand img{ width:180px; height:auto; margin-bottom:1.2rem; }
.foot__brand p{
  font-size:.86rem; line-height:1.65;
  color:rgba(247,243,240,.62); max-width:38ch; margin-bottom:1.3rem;
}
.foot__social{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem;
  font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.foot__social a{ color:rgba(247,243,240,.7); transition:color .18s; }
.foot__social a:hover{ color:var(--oxide-pale); }
.foot__addr{
  margin-top:1rem; font-family:var(--font-mono);
  font-size:.7rem; line-height:1.85; color:rgba(247,243,240,.5);
  overflow-wrap:anywhere;
}
.foot__mail{ overflow-wrap:anywhere; }
.foot__legal{ display:flex; flex-wrap:wrap; gap:.35rem 1.2rem; }
.foot__legal a{ color:rgba(247,243,240,.5); }
.foot__legal a:hover{ color:var(--oxide-pale); }

/* ---------- preloader motif: the damp line rising ---------- */
.pre__motif{
  display:flex; flex-direction:column; gap:7px; align-items:flex-start;
  margin-bottom:2.6rem;
}
.pre__motif i{
  display:block; width:2px; height:20px; background:var(--oxide);
  transform:scaleY(.12); transform-origin:bottom;
  animation:jdnRise 1.15s var(--ease) infinite alternate;
}
.pre__motif i:nth-child(2){ animation-delay:.1s; }
.pre__motif i:nth-child(3){ animation-delay:.2s; }
.pre__motif i:nth-child(4){ animation-delay:.3s; }
.pre__motif i:nth-child(5){ animation-delay:.4s; }
.pre__motif b{
  display:block; width:14px; height:1px; background:var(--oxide-pale);
  transform:scaleX(.2); transform-origin:left;
  animation:jdnTick 1.15s var(--ease) infinite alternate;
}
@keyframes jdnRise{ to{ transform:scaleY(1); } }
@keyframes jdnTick{ to{ transform:scaleX(1); } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .nav__foot{ display:grid; }
  .hdr__cta{ margin-left:auto; gap:0; }
  .hdr__tel{ display:none; }
  .hdr__btn{ padding:.52rem .78rem; font-size:.75rem; }
  .burger{ margin-left:.55rem; }

  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .wall{ max-width:520px; }
  .dpc{ grid-template-columns:minmax(0,1fr); }
  .detail{ max-width:560px; }
  .contact__grid{ grid-template-columns:minmax(0,1fr); }
  .contact__side{ margin-top:.4rem; }
}
@media (min-width:1024px){
  .nav__foot{ display:none; }
}

@media (max-width:900px){
  .sheet{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .sheet__meta{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
  .sheet__num{ font-size:1.35rem; }
  .sheet__tag{ margin-top:0; }
  .motif{ height:34px; width:18px; margin-top:0; margin-left:.2rem; }
  .sect__head{ margin-bottom:2rem; }
  .treat{ grid-template-columns:repeat(2,minmax(min(180px,100%),1fr)); }
  .rest{ grid-template-columns:repeat(2,minmax(min(180px,100%),1fr)); }
  .isles__list{ grid-template-columns:repeat(3,minmax(min(110px,100%),1fr)); }
  .proof{ grid-template-columns:minmax(0,1fr); align-items:start; gap:.8rem; }
  .proof__line{ padding-bottom:0; }
  .proof__list{ grid-template-columns:repeat(2,minmax(min(200px,100%),1fr)); }
}

@media (max-width:760px){
  .wall__svg .wa,
  .detail__svg .wa{ font-size:12.5px; stroke-width:3.2px; }
  .wall__svg .wall__legend{ display:none; }
  .wall__key{
    display:grid; gap:.5rem; margin-top:1rem;
    padding-top:.85rem; border-top:1px solid var(--line);
    font-family:var(--font-mono); font-size:.58rem; line-height:1.4;
    letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
  }
  .wall__cap{ font-size:.54rem; }
}

@media (max-width:640px){
  .treat{ grid-template-columns:minmax(0,1fr); }
  .rest{ grid-template-columns:minmax(0,1fr); }
  .isles__list{ grid-template-columns:repeat(2,minmax(min(120px,100%),1fr)); }
  .pair{ grid-template-columns:minmax(0,1fr); }
  .proof__list{ grid-template-columns:minmax(0,1fr); }
  .wide img{ aspect-ratio:4/3; }
  .hero__trust{ font-size:.57rem; letter-spacing:.12em; }
  .hero__trust li + li::before{ margin:0 .55rem; }
  .badges figure:first-child img{ height:52px; }
  .badges figure:last-child img{ height:20px; }
}

@media (max-width:480px){
  .hdr__btn{ display:none; }
  .eyebrow{ font-size:.55rem; letter-spacing:.12em; gap:.5rem; }
}

@media (prefers-reduced-motion: reduce){
  .pre__motif i,
  .pre__motif b{ animation:none; transform:none; }
}