/* Layan Frontend v4 — personal front-end developer landing over the shared section contract.
   Colour is the supplied Color Styles sheet exactly: Primary/Black, Primary/Neutral, Primary/White
   and the Zinc ramp, with no chromatic accent — black carries every action. Type is Sora from the
   Text Styles sheet. The comp alternates white bands with two full-bleed black ones (Experience
   and Projects); content is held to a 1200px column by --lf-gutter so every band shares an edge. */
.theme-layan-v4{
  --lf-ink:#000;             /* Primary/Black */
  --lf-neutral:#404040;      /* Primary/Neutral — nav and secondary copy */
  --lf-muted:#71717a;        /* Zinc/500 — body copy, 4.8:1 on white */
  --lf-line:#e4e4e7;         /* Zinc/200 — tile and card hairlines */
  --lf-line-2:#d4d4d8;       /* Zinc/300 */
  --lf-wash:#f4f4f5;         /* Zinc/100 — inset fills */
  --lf-on-dark:#a1a1aa;      /* body copy inside the black bands, 5.3:1 on #000 */
  --lf-dark-line:#27272a;
  --lf-dark-card:#0a0a0b;
  --lf-gutter:max(20px,calc((100% - 1200px) / 2));
  --theme-bg:#fff;
  --theme-surface:#fff;
  --theme-text:var(--lf-ink);
  --theme-muted:var(--lf-muted);
  --theme-accent:var(--lf-ink);
  --theme-accent-contrast:#fff;
  --theme-radius:8px;
  --theme-radius-button:8px;
  --theme-radius-card:12px;
  --theme-radius-image:12px;
  --theme-heading:"Sora",system-ui,sans-serif;
  --theme-body:"Sora",system-ui,sans-serif;
  --theme-heading-weight:700;
  --theme-heading-tracking:-.02em;
  --theme-container-width:1200px;
  background:#fff;
  color:var(--lf-ink);
  font-family:var(--theme-body);
}
.theme-layan-v4[dir=rtl]{
  --theme-heading:"Tajawal","Sora",system-ui,sans-serif;
  --theme-body:"Tajawal","Sora",system-ui,sans-serif;
}
.theme-layan-v4 :is(h1,h2,h3){letter-spacing:-.02em;color:var(--lf-ink)}

/* base.css centres .theme-section in a fixed container. The comp instead runs every band
   edge to edge — the two black ones visibly so — and holds only the content to the column,
   which --lf-gutter already does, so the container margin is released here. */
.theme-layan-v4 :is(.theme-section,.theme-quote,.theme-split,.theme-hero,.theme-header,.theme-footer){
  width:auto;
  max-width:none;
  margin-inline:0;
}

/* The comp sets every section heading as "My <strong>Word</strong>", centred, with the
   eyebrow suppressed. .theme-section-head span is that eyebrow across all shared sections. */
.theme-layan-v4 .theme-section-head{
  display:block;
  text-align:center;
  margin:0 0 40px;
}
.theme-layan-v4 .theme-section-head span{display:none}
.theme-layan-v4 .theme-section-head h2{
  margin:0;
  font:700 clamp(26px,3.2vw,36px)/1.25 var(--theme-heading);
}
.theme-layan-v4 .theme-section-lead{
  max-width:660px;
  margin:-24px auto 40px;
  text-align:center;
  color:var(--lf-muted);
  font:400 16px/1.65 var(--theme-body);
}

/* ---------- buttons ---------- */
.theme-layan-v4 :is(.theme-button,.theme-section-cta){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 26px;
  border:1px solid var(--lf-ink);
  border-radius:8px;
  background:var(--lf-ink);
  color:#fff!important;
  font:600 15px/1 var(--theme-body);
  text-decoration:none;
  box-shadow:none;
  transition:background-color .18s ease,color .18s ease;
}
.theme-layan-v4 :is(.theme-button,.theme-section-cta):hover{background:var(--lf-neutral);border-color:var(--lf-neutral)}
.theme-layan-v4 .theme-button-ghost{
  background:transparent;
  color:var(--lf-ink)!important;
  border-color:var(--lf-line-2);
}
.theme-layan-v4 .theme-button-ghost:hover{background:var(--lf-wash);border-color:var(--lf-ink)}
.theme-layan-v4 .theme-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-layan-v4 .theme-text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--lf-ink);
  font:600 14px/1 var(--theme-body);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}

/* ---------- header ---------- */
.theme-layan-v4 .theme-header-standard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:auto;
  min-height:84px;
  padding:16px var(--lf-gutter);
  background:#fff;
  border:0;
}
.theme-layan-v4 .theme-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:600 19px/1 var(--theme-heading);
  color:var(--lf-ink);
  text-decoration:none;
}
/* The comp's brand mark: a solid black droplet left of the wordmark. */
.theme-layan-v4 :is(.theme-brand,.theme-footer-minimal strong):before{
  content:"";
  width:26px;
  height:26px;
  flex:none;
  background:var(--lf-ink);
  border-radius:50% 50% 50% 4px;
}
.theme-layan-v4 .theme-header-standard nav{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,34px);
}
.theme-layan-v4 .theme-header-standard nav a{
  color:var(--lf-neutral);
  font:400 15px/1 var(--theme-body);
  text-decoration:none;
}
.theme-layan-v4 .theme-header-standard nav a:hover,
.theme-layan-v4 .theme-header-standard nav a[aria-current=page]{color:var(--lf-ink);font-weight:600}
.theme-layan-v4 .theme-language{
  display:grid;
  place-items:center;
  min-width:38px;
  height:38px;
  border:1px solid var(--lf-line);
  border-radius:50%;
  font-size:12px;
}
.theme-layan-v4 .theme-button-small{
  min-height:44px;
  padding:0 22px;
  font-size:14px;
}
.theme-layan-v4 .theme-button-small:after{
  content:"";
  width:13px;
  height:13px;
  background:currentColor;
  clip-path:polygon(43% 0,57% 0,57% 52%,80% 52%,50% 92%,20% 52%,43% 52%);
}

/* ---------- hero ---------- */
.theme-layan-v4 .theme-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
  padding:clamp(40px,6vw,84px) var(--lf-gutter) clamp(52px,7vw,96px);
  background:#fff;
}
.theme-layan-v4 .theme-hero-compact{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
/* stretch, not flex-start — otherwise the headline shrink-wraps and wraps far too early. */
.theme-layan-v4 .theme-hero-copy{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
.theme-layan-v4 .theme-hero-copy>:is(a,.theme-kicker){align-self:flex-start}
.theme-layan-v4 .theme-kicker{
  display:inline-block;
  margin-bottom:14px;
  color:var(--lf-muted);
  font:600 13px/1 var(--theme-body);
  letter-spacing:.14em;
  text-transform:uppercase;
}
/* "Hello I'am" sits at Display weight 400; the name and role that follow are the ExtraBold
   half of the comp's headline, so the continuation span carries the weight change. */
.theme-layan-v4 .theme-hero h1{
  margin:0;
  width:100%;
  max-width:none;
  font:400 clamp(30px,4.4vw,46px)/1.32 var(--theme-heading);
}
.theme-layan-v4 .theme-hero-title-tail{font-weight:800}
.theme-layan-v4 .theme-hero-copy>p{
  margin:22px 0 0;
  max-width:520px;
  color:var(--lf-muted);
  font:400 16px/1.75 var(--theme-body);
}
.theme-layan-v4 .theme-hero .theme-button{margin-top:30px}
.theme-layan-v4 .theme-hero-image{display:flex;justify-content:center}
.theme-layan-v4 .theme-hero-image img{
  width:100%;
  max-width:440px;
  height:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
}
.theme-layan-v4 .theme-hero-compact .theme-hero-image img{max-width:340px;border-radius:12px}
.theme-layan-v4 .theme-hero-proof{display:flex;flex-wrap:wrap;gap:32px;margin-top:34px}

/* ---------- skills grid (feature-grid / icons) ----------
   The comp's tile is a bordered square holding an icon and its label, ten to a band and five
   across. The shared block also emits an index, an arrow and a fallback blurb; none of those
   appear in the comp, so they are hidden rather than restyled. */
.theme-layan-v4 .theme-services-section-icons{
  padding:clamp(44px,6vw,80px) var(--lf-gutter);
  background:#fff;
}
.theme-layan-v4 .theme-services-section-icons .theme-services{
  display:grid;
  grid-template-columns:repeat(var(--section-columns-desktop,5),minmax(0,1fr));
  gap:20px;
}
.theme-layan-v4 .theme-services-section-icons .theme-services article{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:118px;
  padding:22px 12px;
  border:1px solid var(--lf-line);
  border-radius:12px;
  background:#fff;
  box-shadow:none;
  transition:border-color .18s ease,transform .18s ease;
}
.theme-layan-v4 .theme-services-section-icons .theme-services article:hover{
  border-color:var(--lf-ink);
  transform:translateY(-2px);
}
/* The comp fills one tile solid black; the second cell of the first row is that tile. */
.theme-layan-v4 .theme-services-section-icons .theme-services article:nth-child(2){
  background:var(--lf-ink);
  border-color:var(--lf-ink);
}
.theme-layan-v4 .theme-services-section-icons .theme-services article:nth-child(2) h3{color:#fff}
.theme-layan-v4 .theme-services-section-icons .theme-services article:nth-child(2) img{filter:invert(1)}
/* base.css gives the service media a fixed picture height and the copy block generous padding;
   the comp's tile is a small icon over its label, so both are released. */
.theme-layan-v4 .theme-services-section-icons .theme-service-media{display:grid;place-items:center;margin:0;height:auto;min-height:0;padding:0}
.theme-layan-v4 .theme-services-section-icons .theme-service-media img{
  width:32px;
  height:32px;
  object-fit:contain;
  border-radius:0;
}
.theme-layan-v4 .theme-services-section-icons .theme-service-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:0;
  min-height:0;
}
.theme-layan-v4 .theme-services-section-icons .theme-service-copy h3{
  margin:0;
  font:600 14px/1.3 var(--theme-body);
  text-align:center;
}
.theme-layan-v4 .theme-services-section-icons :is(.theme-service-index,.theme-arrow,.theme-service-copy p,.theme-service-copy .theme-text-link){display:none}

/* ---------- experience (journey / timeline) — full-bleed black band ---------- */
.theme-layan-v4 .theme-journey-timeline{
  padding:clamp(48px,6.5vw,88px) var(--lf-gutter);
  background:var(--lf-ink);
  color:#fff;
}
.theme-layan-v4 .theme-journey-timeline .theme-section-head h2{color:#fff}
.theme-layan-v4 .theme-journey-list{
  max-width:none;
  width:auto;
  border-inline-start:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:none;
}
.theme-layan-v4 .theme-journey-timeline .theme-journey-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:16px 18px;
  padding:22px 26px;
  border:1px solid var(--lf-dark-line);
  border-radius:12px;
  background:var(--lf-dark-card);
}
.theme-layan-v4 .theme-journey-timeline .theme-journey-media{
  grid-row:1;
  min-height:0;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}
.theme-layan-v4 .theme-journey-timeline .theme-journey-media img{width:34px;height:34px;object-fit:contain}
.theme-layan-v4 .theme-journey-timeline .theme-journey-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:6px 16px;
}
/* Role sits left, the date range right on the same line — the comp's card header. */
.theme-layan-v4 .theme-journey-timeline .theme-journey-copy h3{
  order:1;
  margin:0;
  color:#fff;
  font:600 17px/1.4 var(--theme-heading);
}
.theme-layan-v4 .theme-journey-timeline .theme-journey-meta{
  order:2;
  justify-self:end;
  color:var(--lf-on-dark);
  font:400 13px/1.4 var(--theme-body);
  white-space:nowrap;
}
.theme-layan-v4 .theme-journey-timeline .theme-journey-copy p{
  order:3;
  grid-column:1 / -1;
  margin:8px 0 0;
  color:var(--lf-on-dark);
  font:400 14.5px/1.75 var(--theme-body);
}

/* ---------- about (split) ---------- */
.theme-layan-v4 .theme-split{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
  padding:clamp(48px,6.5vw,88px) var(--lf-gutter);
  background:#fff;
}
.theme-layan-v4 .theme-split-media{position:relative}
/* The comp frames the about illustration in a thin square rule. */
.theme-layan-v4 .theme-split-media img{
  width:100%;
  max-width:400px;
  height:auto;
  padding:26px;
  border:1px solid var(--lf-line-2);
  border-radius:12px;
  object-fit:contain;
  background:#fff;
}
.theme-layan-v4 .theme-split-copy h2{margin:0 0 20px;font:700 clamp(26px,3.2vw,36px)/1.25 var(--theme-heading)}
.theme-layan-v4 .theme-split-copy>p{
  margin:0;
  color:var(--lf-muted);
  font:400 15.5px/1.85 var(--theme-body);
  white-space:pre-line;
}
.theme-layan-v4 .theme-split-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.theme-layan-v4 .theme-split-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---------- social icon strips ---------- */
.theme-layan-v4 :is(.theme-split-social,.theme-inquiry-social,.theme-footer-social) a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:8px;
  background:var(--lf-ink);
  color:#fff;
  text-decoration:none;
  transition:background-color .18s ease;
}
.theme-layan-v4 :is(.theme-split-social,.theme-inquiry-social,.theme-footer-social) a:hover{background:var(--lf-neutral)}
.theme-layan-v4 :is(.theme-split-social,.theme-inquiry-social,.theme-footer-social) .theme-social-icon{display:grid;place-items:center}
.theme-layan-v4 :is(.theme-split-social,.theme-inquiry-social,.theme-footer-social) .theme-social-glyph{width:19px;height:19px;fill:currentColor}
/* The footer strip repeats the label as text; the comp shows icons only. */
.theme-layan-v4 .theme-footer-social a>span:not(.theme-social-icon){
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- projects (portfolio) — full-bleed black band ----------
   The comp alternates each row: image left / copy right, then the reverse, with an oversized
   index number leading the copy column. */
.theme-layan-v4 .theme-products-section{
  padding:clamp(48px,6.5vw,88px) var(--lf-gutter);
  background:var(--lf-ink);
  color:#fff;
}
.theme-layan-v4 .theme-products-section .theme-section-head h2{color:#fff}
.theme-layan-v4 .theme-products-section .theme-section-lead{color:var(--lf-on-dark)}
.theme-layan-v4 .theme-products{display:flex;flex-direction:column;gap:clamp(32px,4.5vw,64px)}
/* The copy column is five flat children (index, title, meta, body, link), so the media spans
   those five rows rather than relying on auto-placement, and the two gaps are set apart: a wide
   column gutter, a tight rhythm between the copy lines. */
.theme-layan-v4 .theme-products article{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-content:center;
  column-gap:clamp(24px,4vw,56px);
  row-gap:10px;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
.theme-layan-v4 .theme-product-media{
  grid-column:1;
  grid-row:1 / span 5;
  align-self:center;
  border-radius:12px;
  overflow:hidden;
}
.theme-layan-v4 .theme-products article>:not(.theme-product-media){grid-column:2}
.theme-layan-v4 .theme-products article:nth-child(even) .theme-product-media{grid-column:2}
.theme-layan-v4 .theme-products article:nth-child(even)>:not(.theme-product-media){grid-column:1}
.theme-layan-v4 .theme-product-media img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}
/* base.css pins the index to the card corner; the comp instead leads the copy column with it,
   so it is returned to flow to take its place as the first row of that column. */
.theme-layan-v4 .theme-product-index{
  position:static;
  margin-bottom:6px;
  color:#fff;
  font:800 clamp(30px,3.6vw,42px)/1 var(--theme-heading);
}
.theme-layan-v4 .theme-products article h3{
  margin:0;
  color:#fff;
  font:700 clamp(19px,2.2vw,24px)/1.35 var(--theme-heading);
}
.theme-layan-v4 .theme-product-meta{
  color:var(--lf-on-dark);
  font:600 12px/1 var(--theme-body);
  letter-spacing:.16em;
}
.theme-layan-v4 .theme-products article p{
  margin:0;
  color:var(--lf-on-dark);
  font:400 14.5px/1.8 var(--theme-body);
}
.theme-layan-v4 .theme-products article .theme-text-link{
  align-self:start;
  color:#fff;
  border-bottom-color:#fff;
}
.theme-layan-v4 .theme-products-section .theme-section-cta{
  margin:clamp(32px,4vw,56px) auto 0;
  background:#fff;
  border-color:#fff;
  color:var(--lf-ink)!important;
}
.theme-layan-v4 .theme-products-section .theme-section-cta:hover{background:var(--lf-line);border-color:var(--lf-line)}
.theme-layan-v4 .theme-products-section .theme-product-badge{display:none}

/* ---------- testimonials (quote / cards) ----------
   The section element and the inner grid share .theme-quote-cards, so the grid is addressed
   through its figure children and the band through section.theme-quote. */
.theme-layan-v4 section.theme-quote{
  display:block;
  padding:clamp(48px,6.5vw,88px) var(--lf-gutter);
  background:#fff;
  text-align:center;
}
.theme-layan-v4 section.theme-quote>.theme-kicker{
  display:block;
  margin:0 0 14px;
  color:var(--lf-ink);
  font:700 clamp(26px,3.2vw,36px)/1.25 var(--theme-heading);
  letter-spacing:-.02em;
  text-transform:none;
}
.theme-layan-v4 div.theme-quote-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
  text-align:center;
}
.theme-layan-v4 div.theme-quote-cards figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:0;
  padding:34px 26px;
  border:1px solid var(--lf-line);
  border-radius:12px;
  background:#fff;
}
/* The comp inverts the middle card. */
.theme-layan-v4 div.theme-quote-cards figure:nth-child(2){
  background:var(--lf-ink);
  border-color:var(--lf-ink);
}
.theme-layan-v4 div.theme-quote-cards figure:nth-child(2) :is(blockquote,figcaption){color:#fff}
.theme-layan-v4 div.theme-quote-cards figure:nth-child(2) figcaption small{color:var(--lf-on-dark)}
.theme-layan-v4 div.theme-quote-cards blockquote{
  margin:0;
  color:var(--lf-muted);
  font:400 14.5px/1.8 var(--theme-body);
}
.theme-layan-v4 div.theme-quote-cards figcaption{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:16px;
  border-top:1px solid var(--lf-line);
  width:100%;
  color:var(--lf-ink);
  font:600 15px/1.3 var(--theme-body);
}
.theme-layan-v4 div.theme-quote-cards figure:nth-child(2) figcaption{border-top-color:var(--lf-dark-line)}
.theme-layan-v4 div.theme-quote-cards figcaption small{
  color:var(--lf-muted);
  font:400 13px/1.3 var(--theme-body);
}
.theme-layan-v4 .theme-rating{color:var(--lf-line-2);font-size:14px;letter-spacing:2px}
.theme-layan-v4 div.theme-quote-cards figure:nth-child(2) .theme-rating{color:#fff}

/* ---------- contact form (contact-form / project) ----------
   The comp puts the form on one side and the "Let's talk" rail — headline, email, phone and the
   icon strip — on the other. */
.theme-layan-v4 .theme-inquiry-section-project{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(28px,5vw,72px);
  padding:clamp(48px,6.5vw,88px) var(--lf-gutter);
  background:#fff;
}
/* Form first, rail second — the comp's reading order on wide screens. */
.theme-layan-v4 .theme-inquiry-section-project>div:first-child{order:2}
.theme-layan-v4 .theme-inquiry-section-project .theme-inquiry{order:1}
.theme-layan-v4 .theme-inquiry-section-project .theme-kicker{display:none}
.theme-layan-v4 .theme-inquiry-section-project h2{
  margin:0 0 16px;
  font:700 clamp(26px,3.4vw,38px)/1.28 var(--theme-heading);
}
.theme-layan-v4 .theme-inquiry-section-project>div>p{
  margin:0;
  color:var(--lf-muted);
  font:400 15.5px/1.8 var(--theme-body);
}
.theme-layan-v4 .theme-inquiry-details{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.theme-layan-v4 .theme-inquiry-detail{display:flex;align-items:center;gap:14px}
.theme-layan-v4 .theme-inquiry-detail-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:none;
  border-radius:8px;
  background:var(--lf-wash);
}
.theme-layan-v4 .theme-inquiry-detail-icon svg{width:19px;height:19px;fill:none;stroke:var(--lf-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-layan-v4 .theme-inquiry-detail-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.theme-layan-v4 .theme-inquiry-detail-copy small{color:var(--lf-muted);font:400 12.5px/1.3 var(--theme-body)}
.theme-layan-v4 .theme-inquiry-detail-copy :is(a,strong){
  color:var(--lf-ink);
  font:600 16px/1.4 var(--theme-body);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.theme-layan-v4 .theme-inquiry-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.theme-layan-v4 .theme-inquiry{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:0;
  padding:0;
  border:0;
  background:none;
}
.theme-layan-v4 .theme-inquiry-intro{
  grid-column:1 / -1;
  margin:0;
  color:var(--lf-muted);
  font:400 13.5px/1.6 var(--theme-body);
}
.theme-layan-v4 .theme-inquiry-wide{grid-column:1 / -1}
.theme-layan-v4 .theme-inquiry label{display:flex;flex-direction:column;gap:7px;min-width:0}
.theme-layan-v4 .theme-inquiry label span{
  color:var(--lf-neutral);
  font:500 13.5px/1.3 var(--theme-body);
}
.theme-layan-v4 .theme-inquiry :is(input,textarea){
  width:100%;
  padding:13px 15px;
  border:1px solid var(--lf-line);
  border-radius:8px;
  background:#fff;
  color:var(--lf-ink);
  font:400 15px/1.5 var(--theme-body);
  box-sizing:border-box;
}
.theme-layan-v4 .theme-inquiry :is(input,textarea):focus{outline:2px solid var(--lf-ink);outline-offset:1px;border-color:var(--lf-ink)}
.theme-layan-v4 .theme-inquiry textarea{resize:vertical;min-height:120px}
.theme-layan-v4 .theme-inquiry button{grid-column:1 / -1;justify-self:start;margin-top:4px}

/* ---------- location ---------- */
.theme-layan-v4 .theme-location-section{padding:clamp(44px,6vw,80px) var(--lf-gutter);background:#fff}

/* ---------- footer ---------- */
.theme-layan-v4 .theme-footer-minimal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px var(--lf-gutter);
  border-top:1px solid var(--lf-line);
  background:#fff;
  color:var(--lf-muted);
}
.theme-layan-v4 .theme-footer-minimal strong{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--lf-ink);
  font:600 18px/1 var(--theme-heading);
}
.theme-layan-v4 .theme-footer-minimal nav{display:flex;flex-wrap:wrap;gap:20px}
.theme-layan-v4 .theme-footer-minimal nav a{
  color:var(--lf-muted);
  font:400 14px/1 var(--theme-body);
  text-decoration:none;
}
.theme-layan-v4 .theme-footer-minimal nav a:hover{color:var(--lf-ink)}
.theme-layan-v4 .theme-footer-social{display:flex;gap:10px}
.theme-layan-v4 .theme-footer-social a{width:36px;height:36px;position:relative}
.theme-layan-v4 .theme-footer-social .theme-social-glyph{width:16px;height:16px}
.theme-layan-v4 .theme-footer-minimal>span{color:var(--lf-muted);font:400 13.5px/1.5 var(--theme-body)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .theme-layan-v4 .theme-services-section-icons .theme-services{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .theme-layan-v4 :is(.theme-hero,.theme-split,.theme-inquiry-section-project){grid-template-columns:minmax(0,1fr)}
  .theme-layan-v4 .theme-hero-image{order:-1}
  .theme-layan-v4 .theme-hero-image img{max-width:320px}
  .theme-layan-v4 .theme-split-media img{max-width:340px}
  .theme-layan-v4 .theme-inquiry-section-project>div:first-child{order:1}
  .theme-layan-v4 .theme-inquiry-section-project .theme-inquiry{order:2}
  .theme-layan-v4 div.theme-quote-cards{grid-template-columns:minmax(0,1fr)}
  /* One column: every child must be released from its desktop column, otherwise the copy keeps
     column 2, an implicit track appears, and the image track collapses to zero. A media query
     adds no specificity, so these selectors have to match the desktop ones weight for weight. */
  .theme-layan-v4 .theme-products article{grid-template-columns:minmax(0,1fr)}
  .theme-layan-v4 .theme-products article>:not(.theme-product-media),
  .theme-layan-v4 .theme-products article:nth-child(even)>:not(.theme-product-media){grid-column:1}
  .theme-layan-v4 .theme-products article .theme-product-media,
  .theme-layan-v4 .theme-products article:nth-child(even) .theme-product-media{
    grid-column:1;
    grid-row:auto;
    order:-1;
  }
  .theme-layan-v4 .theme-products article .theme-product-media img{height:auto}
}
@media (max-width:720px){
  .theme-layan-v4 .theme-header-standard{flex-wrap:wrap}
  .theme-layan-v4 .theme-services-section-icons .theme-services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-layan-v4 .theme-journey-timeline .theme-journey-copy{grid-template-columns:minmax(0,1fr)}
  .theme-layan-v4 .theme-journey-timeline .theme-journey-meta{justify-self:start}
  .theme-layan-v4 .theme-inquiry{grid-template-columns:minmax(0,1fr)}
}

/* ---------- RTL ---------- */
.theme-layan-v4[dir=rtl] .theme-brand:before{border-radius:50% 50% 4px 50%}
/* justify-self and border-inline already mirror on their own; only the brand droplet, whose
   corner is a physical shape, needs flipping. */