/* LAYN's own additions. site.css and about.css come from the original build and are left as
   imported; anything new goes here. The Worker links this file on every page (src/content.js). */

/* --- Arabic typefaces, served from this site ------------------------------------------- */

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url(/assets/fonts/noto-naskh-arabic.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Sans Arabic";
  src: url(/assets/fonts/noto-sans-arabic.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* --- Philosophy: photo on one side, the words on the other ------------------------------ */

.philosophy-panel {
  background: #f3eee6;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  display: grid;
}
.philosophy-panel-photo img {
  object-fit: cover;
  /* The dispenser hangs near the right edge of the photo; keep it in frame when the column is narrow. */
  object-position: 92% 50%;
  block-size: 100%;
  inline-size: 100%;
  min-block-size: 560px;
  max-block-size: 860px;
  display: block;
}
.philosophy-panel-copy {
  align-self: center;
  min-inline-size: 0;
  padding: clamp(56px, 7vw, 112px) clamp(28px, 5.5vw, 96px);
}
.philosophy-panel-copy .eyebrow {
  color: #7d5f49;
  letter-spacing: 0.2em;
  margin-block-end: 26px;
  font-size: 13px;
}
.philosophy-panel-copy h2 {
  font-size: clamp(2.2rem, 3.3vw, 3.3rem);
  line-height: 1.14;
}
.philosophy-panel-copy h2 em {
  color: #818670;
}
.philosophy-panel-lead {
  color: #5c6259;
  text-wrap: pretty;
  max-inline-size: 52ch;
  margin-block-start: 26px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.8;
}
.philosophy-panel-principles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.philosophy-panel-principles li {
  text-align: center;
  min-inline-size: 0;
}
.philosophy-panel-icon {
  color: #7d5f49;
  background: #ecdcd2;
  border-radius: 50%;
  place-items: center;
  block-size: 64px;
  inline-size: 64px;
  margin-inline: auto;
  display: grid;
}
.philosophy-panel-icon svg {
  block-size: 28px;
  inline-size: 28px;
}
.philosophy-panel-principles h3 {
  color: #353c37;
  font: 600 12px/1.6 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-block-start: 18px;
}
.philosophy-panel-principles p {
  color: #5c6259;
  text-wrap: balance;
  margin-block-start: 8px;
  font-size: 14px;
  line-height: 1.6;
}
.site-page[lang="ar"] .philosophy-panel-copy .eyebrow {
  letter-spacing: 0;
  font-size: 14px;
}
.site-page[lang="ar"] .philosophy-panel-copy h2 {
  letter-spacing: 0;
  line-height: 1.35;
}
.site-page[lang="ar"] .philosophy-panel-principles h3 {
  letter-spacing: 0;
  font-size: 15px;
}
@media (max-width: 900px) {
  .philosophy-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .philosophy-panel-photo img {
    aspect-ratio: 4 / 3;
    min-block-size: 0;
    max-block-size: none;
  }
  .philosophy-panel-copy {
    padding: 52px 23px 60px;
  }
  .philosophy-panel-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-block-start: 36px;
  }
  .philosophy-panel-principles li {
    text-align: start;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    display: grid;
  }
  .philosophy-panel-icon {
    block-size: 56px;
    inline-size: 56px;
    grid-row: span 2;
    margin: 0;
  }
  .philosophy-panel-principles h3 {
    align-self: end;
    margin-block-start: 0;
  }
  .philosophy-panel-principles p {
    align-self: start;
    margin-block-start: 4px;
  }
}

/* --- Company and contact details at the foot of every page (set in the admin) ------------ */

.company-line {
  color: #686e65;
  text-align: center;
  border-block-start: 1px solid #dedfd6;
  max-inline-size: 1424px;
  margin: 24px auto 0;
  padding: 18px 23px 6px;
  font: 13px/1.8 var(--sans, Arial, Helvetica, sans-serif);
}
.company-line p {
  color: inherit;
  margin: 0;
}
.company-line a {
  color: #3e4b3f;
  text-underline-offset: 3px;
}

/* --- One enquiry button within reach on phones (added by site.js) ------------------------ */

/* A small floating button in the corner: always reachable, without covering a strip of the page. */
.enquiry-bar {
  z-index: 30;
  display: none;
  position: fixed;
  inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 14px;
}
.enquiry-bar .button {
  box-shadow:
    0 8px 24px #1f2a2338,
    0 1px 3px #1f2a2326;
  gap: 8px;
  block-size: 46px;
  min-block-size: 0;
  padding-block: 0;
  padding-inline: 18px;
  font-size: 14px;
}
@media (max-width: 760px) {
  .enquiry-bar:not([hidden]) {
    display: block;
  }
}

/* --- Small print that carries meaning: a little larger, and easier to tap on phones ------- */

.access-reference a,
.access-reference p,
.enquiry-form .form-privacy,
.waitlist-form .waitlist-privacy {
  font-size: 13px;
}
@media (max-width: 760px) {
  .site-footer .footer-links a,
  .company-line a {
    padding-block: 7px;
    display: inline-block;
  }
}

/* --- Hero: the plain statement sits inside the main heading, styled as the small line above it --- */

.hero-kicker {
  text-transform: uppercase;
  display: block;
}
.hero-description {
  max-width: 430px;
}

/* --- Text contrast: secondary text and small labels one step darker ------------------------ */

p {
  color: #5f655c;
}
.eyebrow {
  color: #676653;
}

/* --- Header: slimmer once the page is scrolled --------------------------------------------- */

.site-header,
.site-header .brand-image {
  transition:
    height 0.25s ease,
    width 0.25s ease;
}
.site-header.is-compact {
  height: 76px;
}
.site-header.is-compact .brand-image {
  width: 70px;
  height: 64px;
}
@media (max-width: 640px) {
  .site-header.is-compact {
    height: 68px;
  }
  .site-header.is-compact .brand-image {
    width: 60px;
    height: 55px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .brand-image {
    transition: none;
  }
}

/* --- Enquiry form: optional choices folded under one line ---------------------------------- */

.form-more > summary {
  color: #3e4b3f;
  cursor: pointer;
  font: 500 14px/1.6 var(--sans);
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  list-style: none;
  display: inline-flex;
}
.form-more > summary::-webkit-details-marker {
  display: none;
}
.form-more > summary::before {
  content: "+";
  border: 1px solid #c9ccc0;
  border-radius: 50%;
  place-items: center;
  block-size: 22px;
  inline-size: 22px;
  font: 400 16px/1 var(--sans);
  display: grid;
}
.form-more[open] > summary::before {
  content: "−";
}
.form-more > summary:focus-visible {
  outline: 2px solid #7c8d76;
  outline-offset: 3px;
}
.form-more-body {
  gap: 20px;
  padding-block: 8px 4px;
  display: grid;
}
.faq-answer .inline-link {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration: underline;
}

/* --- Phones: swipe sideways through finishes, concept visuals, sectors and plans ------------ */

@media (max-width: 640px) {
  .product-grid,
  .designs-gallery,
  .sectors-grid,
  .plans-grid {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 14px;
    margin-inline: -23px;
    padding-inline: 23px;
    scroll-padding-inline: 23px;
    display: flex;
    overflow-x: auto;
  }
  .product-grid::-webkit-scrollbar,
  .designs-gallery::-webkit-scrollbar,
  .sectors-grid::-webkit-scrollbar,
  .plans-grid::-webkit-scrollbar {
    display: none;
  }
  .product-grid > *,
  .designs-gallery > *,
  .sectors-grid > *,
  .plans-grid > * {
    scroll-snap-align: start;
    flex: 0 0 84%;
    min-inline-size: 0;
  }
  .text-link {
    min-block-size: 44px;
  }

  /* Side by side, each sector needs its own frame; stacked, a line between them was enough. */
  .sectors-grid .sector-card,
  .sectors-grid .sector-card:first-child,
  .sectors-grid .sector-card:last-child,
  .site-page[lang="ar"] .sectors-grid .sector-card,
  .site-page[lang="ar"] .sectors-grid .sector-card:first-child,
  .site-page[lang="ar"] .sectors-grid .sector-card:last-child,
  .site-page[lang="ar"] .sectors-grid .sector-card:nth-child(3),
  .site-page[lang="ar"] .sectors-grid .sector-card:nth-child(4) {
    border: 1px solid #d6dacd;
    border-radius: 4px;
    padding: 24px 22px 12px;
  }
  .sectors-grid .sector-icon {
    top: 25px;
    left: 22px;
  }
  .site-page[lang="ar"] .sectors-grid .sector-icon {
    left: auto;
    right: 22px;
  }
}

/* --- About page: it now carries the same header as the rest of the site -------------------- */

.story-page .site-header a.button {
  color: var(--primary-foreground, #fff);
}

/* --- The pilot: the first step most buyers will take, so it gets a band of its own ---------- */

.pilot-offer {
  color: #faf8ef;
  background: #36483d;
  border-radius: 4px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px 48px;
  margin-top: 27px;
  padding: 34px 36px;
  display: grid;
}
.pilot-offer .eyebrow {
  color: #cdd5c0;
}
.pilot-offer h3 {
  color: #faf8ef;
  letter-spacing: -0.03em;
  margin-block: 10px 10px;
  font-size: clamp(26px, 2.4vw, 33px);
}
.pilot-offer-copy > p:not(.eyebrow) {
  color: #e0e4d8;
  max-inline-size: 58ch;
  font-size: 16px;
  line-height: 1.75;
}
.pilot-offer .button {
  color: #2f3d33;
  background: #faf8ef;
  justify-content: space-between;
  gap: 12px;
  inline-size: 100%;
  min-block-size: 52px;
}
.pilot-offer .button:hover {
  background: #fff;
}
.pilot-offer-note {
  color: #cdd5c0;
  margin-block-start: 12px;
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .pilot-offer {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 24px;
  }
}

/* --- A direct line beside the enquiry form (set in the admin) -------------------------------- */

.quick-contact {
  margin-block-start: 18px;
  font-size: 15px;
  line-height: 1.7;
}
.quick-contact a {
  color: #3e4b3f;
  text-underline-offset: 3px;
  font-weight: 500;
  text-decoration: underline;
}

/* --- Phones: the plan we most want chosen comes first in the swipe row ----------------------- */

@media (max-width: 640px) {
  .plans-grid > .plan-card.featured {
    order: -1;
  }
}

/* --- Audience pages (hotels, workplaces, universities) ----------------------------------- */

.audience-page .evidence-hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 4.3rem);
}
.audience-research {
  margin-block-start: 26px;
}
/* The dispenser sits lower in the campus picture: show more of the bottom so the caption clears it. */
.evidence-hero-image img[src*="layn-campus-washroom"] {
  object-position: 50% 72%;
}
.draft-note {
  color: #5a4a1c;
  text-align: center;
  background: #f4ecd2;
  border-block-end: 1px solid #e3d6a8;
  margin: 0;
  padding: 9px 16px;
  font:
    13px/1.5 Arial,
    Helvetica,
    sans-serif;
}