/* ==========================================================================
   Al-Nassajoun for Carpets & Moquette
   Design system: "the loom" — warp hairlines, weft bands, plain-weave motif
   ========================================================================== */

:root{
  --ink:        #101A28;   /* deep indigo — dye vat */
  --ink-soft:   #1D2E45;
  --paper:      #F7F7F4;   /* mill paper */
  --stone:      #E5E7E1;   /* carved stone of the sign */
  --jute:       #978C77;   /* jute backing fibre */
  --madder:     #B4322E;   /* madder red — the accent thread */
  --saffron:    #D0A02E;

  --line:       rgba(16,26,40,.14);
  --line-soft:  rgba(16,26,40,.08);
  --line-light: rgba(229,231,225,.18);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Spectral", Georgia, serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --wrap: 1220px;
  --gut: clamp(1.15rem, 4vw, 2.75rem);
  --band-y: clamp(4rem, 9vw, 7.5rem);
  --r: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .22vw,1.09rem);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
}

/* Warp threads: fixed hairlines running behind every transparent band */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    var(--line-soft) 0 1px, transparent 1px 104px);
}

img,svg,iframe{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Type ---------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"wdth" 118;
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,1.5rem + 4.4vw,5.1rem); text-transform:uppercase; letter-spacing:-.028em; }
h2{ font-size:clamp(1.85rem,1.25rem + 2.4vw,3.15rem); text-transform:uppercase; }
h3{ font-size:clamp(1.15rem,1rem + .55vw,1.45rem); font-variation-settings:"wdth" 108; letter-spacing:.005em; }
h4{ font-size:1rem; font-variation-settings:"wdth" 100; letter-spacing:.02em; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--jute);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--madder); flex:none;
}
.lede{
  font-size:clamp(1.1rem,1rem + .55vw,1.34rem);
  line-height:1.6;
  max-width:56ch;
}
.mono{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em; }
.muted{ color:rgba(16,26,40,.66); }

/* ---------- Layout -------------------------------------------------------- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.band{ padding-block:var(--band-y); position:relative; }
.band--ink{ background:var(--ink); color:var(--stone); }
.band--ink .muted{ color:rgba(229,231,225,.66); }
.band--ink .eyebrow{ color:rgba(229,231,225,.6); }
.band--stone{ background:var(--stone); }
.band--tight{ padding-block:clamp(2.75rem,5vw,4.25rem); }

.head-block{ max-width:64ch; margin-bottom:clamp(2.25rem,4vw,3.5rem); }
.head-block--split{
  max-width:none; display:grid; gap:1.5rem clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width:900px){
  .head-block--split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
}

.grid{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){ .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:720px){ .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:.95rem 1.5rem; border:1px solid var(--ink); border-radius:var(--r);
  background:var(--ink); color:var(--stone);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.btn svg{ width:14px; height:14px; flex:none; transition:transform .25s ease; }
.btn:hover{ background:var(--madder); border-color:var(--madder); color:#fff; }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--stone); }
.band--ink .btn{ background:var(--stone); border-color:var(--stone); color:var(--ink); }
.band--ink .btn:hover{ background:var(--madder); border-color:var(--madder); color:#fff; }
.band--ink .btn--ghost{ background:transparent; color:var(--stone); border-color:rgba(229,231,225,.4); }
.band--ink .btn--ghost:hover{ background:var(--stone); color:var(--ink); border-color:var(--stone); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--madder); outline-offset:3px;
}

/* ---------- Header -------------------------------------------------------- */

.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(247,247,244,.9);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:74px;
}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); }
.brand svg{ width:34px; height:34px; flex:none; color:var(--ink); }
.brand-text b{
  font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 112;
  text-transform:uppercase; letter-spacing:.01em; font-size:1.02rem; line-height:1;
  display:block; color:inherit;
}
.brand-text > span{
  display:block; font-family:var(--f-mono); font-size:.61rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--jute); margin-top:.28rem;
}

.nav{ display:flex; align-items:center; gap:.25rem; }
.nav a{
  font-family:var(--f-mono); font-size:.73rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; padding:.6rem .72rem; border-radius:var(--r);
  color:rgba(16,26,40,.72); transition:color .2s ease,background .2s ease;
}
.nav a:hover{ color:var(--ink); background:rgba(16,26,40,.05); }
.nav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--madder); }
.nav .btn{ margin-left:.6rem; padding:.7rem 1.05rem; }
.nav .btn:hover{ color:#fff; }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0; border:1px solid var(--line);
  border-radius:var(--r); background:transparent; cursor:pointer; color:var(--ink);
}
.nav-toggle i{ display:block; width:18px; height:1.5px; background:currentColor; margin:4px auto; transition:transform .3s ease,opacity .3s ease; }
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:980px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1.5rem;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.95rem .25rem; border-bottom:1px solid var(--line-soft); font-size:.8rem; }
  .nav a[aria-current="page"]{ box-shadow:none; color:var(--madder); }
  .nav .btn{ margin:1rem 0 0; justify-content:center; }
}

/* ---------- Hero ---------------------------------------------------------- */

.hero{ border-bottom:1px solid var(--line); }
.hero-in{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(3.25rem,7vw,6rem) clamp(3rem,6vw,5rem);
  align-items:center;
}
@media (min-width:960px){
  .hero-in{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
}
.hero h1 span{ display:block; color:var(--madder); }
.hero .lede{ margin-top:1.6rem; }

.weave-panel{
  position:relative; aspect-ratio:1/1; border:1px solid var(--line);
  overflow:hidden; background:var(--ink);
  clip-path:inset(0 0 0 0);
}
.js .weave-panel{ animation:weave-in 1.4s cubic-bezier(.65,.02,.24,1) .15s both; }
@keyframes weave-in{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.weave-panel svg{ width:100%; height:100%; }
.weave-tag{
  position:absolute; left:0; bottom:0; right:0;
  display:flex; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; background:rgba(16,26,40,.82);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(229,231,225,.8);
  border-top:1px solid rgba(229,231,225,.16);
}

/* ---------- Ledger strip -------------------------------------------------- */

.ledger{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line-light);
}
@media (min-width:860px){ .ledger{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ledger-item{
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem);
  border-bottom:1px solid var(--line-light);
  border-right:1px solid var(--line-light);
}
@media (min-width:860px){ .ledger-item:last-child{ border-right:0; } }
.ledger-item b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-variation-settings:"wdth" 112;
  font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem); line-height:1; letter-spacing:-.02em;
}
.ledger-item span{
  display:block; margin-top:.7rem; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(229,231,225,.6);
}

/* ---------- Cards --------------------------------------------------------- */

.card{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.1rem); border-radius:var(--r);
  display:flex; flex-direction:column; gap:.75rem;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.card__no{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; color:var(--madder);
}
.card h3{ margin:0; }
.card p{ color:rgba(16,26,40,.72); font-size:.98rem; }
.card ul{ margin:.2rem 0 0; padding:0; list-style:none; }
.card ul li{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.05em;
  padding:.5rem 0; border-top:1px solid var(--line-soft); color:rgba(16,26,40,.72);
}
a.card{ text-decoration:none; }
a.card:hover{ border-color:var(--ink); transform:translateY(-3px); box-shadow:0 14px 34px -22px rgba(16,26,40,.6); }
.card__go{
  margin-top:auto; padding-top:1rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--madder); display:flex; align-items:center; gap:.5rem;
}
.band--stone .card{ background:transparent; }
.band--ink .card{ background:transparent; border-color:rgba(229,231,225,.2); }
.band--ink .card p{ color:rgba(229,231,225,.72); }
.band--ink .card ul li{ border-color:rgba(229,231,225,.14); color:rgba(229,231,225,.72); }

/* ---------- Process steps ------------------------------------------------- */

.steps{ display:grid; gap:0; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line); list-style:none; margin:0; padding:0; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step{ padding:clamp(1.5rem,3vw,2.1rem) clamp(1rem,2vw,1.6rem); border-bottom:1px solid var(--line); }
@media (min-width:820px){
  .step{ border-right:1px solid var(--line); }
  .step:last-child{ border-right:0; }
}
.step b{
  display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--madder); margin-bottom:1.1rem;
}
.step h3{ margin-bottom:.5rem; }
.step p{ font-size:.95rem; color:rgba(16,26,40,.72); }

/* ---------- Data table (plots / specs) ------------------------------------ */

.facts{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:.82rem; }
.facts caption{
  text-align:left; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--jute); padding-bottom:1rem;
}
.facts th,.facts td{ text-align:left; padding:1rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.facts thead th{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jute); font-weight:500; border-bottom:1px solid var(--ink);
}
.facts tbody th{ font-weight:500; }
.facts tfoot td{ font-weight:500; border-bottom:0; border-top:1px solid var(--ink); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Spec list ----------------------------------------------------- */

.spec{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.spec li{
  display:grid; gap:.15rem 1.5rem; grid-template-columns:minmax(0,1fr);
  padding:1rem 0; border-bottom:1px solid var(--line);
}
@media (min-width:640px){ .spec li{ grid-template-columns:minmax(0,10rem) minmax(0,1fr); align-items:baseline; } }
.spec dt,.spec b{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--jute);
}
.spec span{ font-size:1rem; }
.band--ink .spec,.band--ink .spec li{ border-color:rgba(229,231,225,.18); }
.band--ink .spec b{ color:rgba(229,231,225,.55); }

/* ---------- Map ----------------------------------------------------------- */

.map-frame{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--stone); position:relative;
}
.map-frame iframe{ width:100%; height:clamp(300px,46vw,470px); border:0; display:block; filter:saturate(.75); }
.map-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; background:var(--paper);
}
.map-bar a{ color:var(--madder); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- Callout / CTA ------------------------------------------------- */

.cta-in{ display:grid; gap:1.75rem; align-items:center; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .cta-in{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } }
.cta-in h2{ margin:0; }

.note{
  border-left:2px solid var(--madder); padding:.35rem 0 .35rem 1.25rem;
  font-size:1rem; color:rgba(16,26,40,.75);
}
.band--ink .note{ color:rgba(229,231,225,.75); }

/* ---------- Contact form -------------------------------------------------- */

.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.5rem; }
.field label{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--jute);
}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:.85rem .95rem; width:100%;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink); outline:none; }
@media (min-width:640px){ .form-row{ display:grid; gap:1.15rem; grid-template-columns:1fr 1fr; } }
.form-msg{
  padding:.9rem 1.1rem; border-radius:var(--r);
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em;
  border:1px solid var(--line);
}
.form-msg--ok{ border-color:var(--ink); background:var(--stone); }
.form-msg--bad{ border-color:var(--madder); color:var(--madder); }

/* ---------- Footer -------------------------------------------------------- */

.site-foot{ background:var(--ink); color:rgba(229,231,225,.78); padding-block:clamp(3rem,6vw,4.5rem) 0; }
.foot-grid{
  display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:minmax(0,1fr);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:760px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-foot .brand{ color:var(--stone); }
.site-foot .brand-text > span{ color:rgba(229,231,225,.55); }
.site-foot h4{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(229,231,225,.5); margin-bottom:1.1rem; font-weight:500;
}
.foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot-list a{ text-decoration:none; font-size:.97rem; color:rgba(229,231,225,.78); transition:color .2s ease; }
.foot-list a:hover{ color:#fff; }
.foot-note{ font-size:.97rem; max-width:44ch; margin-top:1.25rem; color:rgba(229,231,225,.62); }

.foot-bar{
  border-top:1px solid rgba(229,231,225,.16);
  padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(229,231,225,.5);
}
.foot-bar a{ color:rgba(229,231,225,.8); text-decoration:none; }
.foot-bar a:hover{ color:#fff; }
.credit b{ color:var(--stone); font-weight:500; }
.credit a{ border-bottom:1px solid rgba(229,231,225,.4); padding-bottom:1px; }

/* ---------- Page header (inner pages) ------------------------------------- */

.page-head{ border-bottom:1px solid var(--line); padding-block:clamp(2.75rem,6vw,4.75rem); }
.page-head h1{ font-size:clamp(2.1rem,1.4rem + 3.2vw,4rem); margin-bottom:1.25rem; }
.page-head .lede{ max-width:62ch; }

/* ---------- Reveal -------------------------------------------------------- */

.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .js .weave-panel{ animation:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--stone);
  padding:.8rem 1.2rem; z-index:100; font-family:var(--f-mono); font-size:.75rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* Nav CTA needs to beat the .nav a colour rule */
.nav a.btn{ color:var(--stone); }
.nav a.btn:hover{ color:#fff; background:var(--madder); border-color:var(--madder); }
.nav a.btn[aria-current="page"]{ box-shadow:none; }

/* .card p sets a muted colour at equal specificity — restore the accent label */
.card p.card__no,
.band--ink .card p.card__no,
.band--stone .card p.card__no{ color:var(--madder); }