/*
 * Nexpert site-wide styles for every page except the homepage.
 * Built from preview/assets/preview.css and preview/article.html (the approved
 * designs for the other page types), with the booking section and footer taken
 * from the current homepage. Change the design previews first, then bring the
 * change here.
 */
@font-face { font-family:"Lato"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/Lato-Light.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Lato-Regular.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/Lato-Bold.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/Lato-Black.woff") format("woff"); }
@font-face { font-family:"Lato"; font-style:italic; font-weight:900; font-display:swap; src:url("../fonts/Lato-BlackItalic.woff") format("woff"); }

:root {
  --shell:#e4e1da;
  --paper:#f8f7f3;
  --white:#fff;
  --ink:#3b3a38;
  --muted:#696761;
  --line:rgba(59,58,56,.22);
  --gold:#da990f;
  --clay:#c8a17e;
  --earth:#a98869;
  --forest:#4f6254;
  --brown:#78532f;
  --radius:clamp(18px,1.6vw,26px);
  --gutter:clamp(18px,2.5vw,38px);
  --pad:clamp(28px,5vw,76px);
  --section-space:clamp(78px,10vw,152px);
  --measure:68ch;
  --flow:clamp(20px,1.7vw,26px);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--shell); color:var(--ink); font-family:"Lato","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; }
:is(.page-head-media,.featured-media,.card-media,.insight-media,.article-figure,.prose figure .frame) img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }

.page { width:min(100%,1520px); margin:0 auto; padding:var(--gutter); }
.panel { position:relative; overflow:hidden; margin-bottom:var(--gutter); border-radius:var(--radius); background:var(--paper); }
.label { margin:0 0 22px; font-size:.77rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.section-title { margin:0; font-size:clamp(2.25rem,4.3vw,4.5rem); font-weight:400; line-height:1.03; letter-spacing:-.04em; text-wrap:balance; }
.body-lg { margin:0; max-width:720px; color:var(--muted); font-size:clamp(1.08rem,1.5vw,1.32rem); font-weight:300; line-height:1.62; }
.arrow { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; }
.circle-link { width:86px; height:86px; display:inline-flex; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:50%; font-size:.875rem; font-weight:700; letter-spacing:.05em; text-align:center; text-transform:uppercase; transition:background .25s ease,color .25s ease,transform .25s ease; }
.circle-link:hover { background:var(--ink); color:var(--paper); transform:translateY(-3px); }
.text-link { display:inline-flex; align-items:center; gap:12px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.wordmark { display:inline-flex; align-items:center; gap:.14em; font-size:clamp(1.8rem,2.35vw,2.35rem); font-style:italic; font-weight:900; line-height:1; letter-spacing:-.06em; }
.north-star { color:var(--gold); font-size:.82em; font-style:normal; line-height:1; }
.screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Light site header: the same variant introduced in preview/article.html,
   for every template that has no hero photograph to sit on. ---------------- */
.site-header { color:var(--ink); }
.site-nav { display:grid; grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr); align-items:center; gap:clamp(22px,3vw,48px); min-height:90px; padding:18px clamp(24px,3vw,46px); }
.desktop-nav { display:flex; align-items:center; justify-self:center; gap:clamp(18px,2.2vw,34px); }
.desktop-nav a { position:relative; padding:9px 0; color:var(--muted); font-size:.84rem; font-weight:700; letter-spacing:.035em; transition:color .18s ease; }
.desktop-nav a:hover { color:var(--ink); }
.desktop-nav a::after { position:absolute; right:0; bottom:3px; left:0; height:1px; background:currentColor; content:""; transform:scaleX(0); transform-origin:right; transition:transform .22s ease; }
.desktop-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.desktop-nav a[aria-current="page"] { color:var(--ink); }
.desktop-nav a[aria-current="page"]::after { transform:scaleX(1); background:var(--gold); height:2px; }
.nav-actions { display:flex; align-items:center; justify-self:end; gap:12px; }
.language,.nav-contact { min-height:42px; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.language { min-width:42px; padding:0 9px; border:0; border-radius:999px; background:transparent; color:var(--muted); text-decoration:none; transition:background .18s ease,color .18s ease; }
.language:hover { background:rgba(59,58,56,.08); color:var(--ink); }
.nav-contact { gap:10px; padding:0 18px; border:1px solid rgba(59,58,56,.5); border-radius:999px; transition:background .18s ease,color .18s ease; }
.nav-contact:hover { background:var(--ink); color:var(--paper); }
.menu-button { display:none; align-items:center; gap:10px; padding:10px 16px; border:1px solid rgba(59,58,56,.28); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.menu-icon { display:grid; gap:3px; }
.menu-icon i { width:13px; height:1px; display:block; background:currentColor; }
.header-menu { position:absolute; z-index:4; top:76px; right:28px; width:min(310px,calc(100% - 56px)); display:none; padding:18px; border-radius:16px; background:var(--white); color:var(--ink); box-shadow:0 24px 70px rgba(38,37,34,.22); opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease; }
.header-menu.open { opacity:1; pointer-events:auto; transform:none; }
.header-menu a { display:flex; justify-content:space-between; padding:13px 8px; border-bottom:1px solid var(--line); font-size:.92rem; }
.header-menu a:last-child { border-bottom:0; }

/* ---- Page head: split title/intro columns, reference-aligned -------------
   Every non-homepage page on the SKS Creative "Construction Company 3"
   reference (WEBSITE_DIRECTION.md's approved spatial-language reference) opens
   the same way: breadcrumb, then a big left-aligned title running against a
   right-column intro paragraph, at the same baseline, in one panel -- and on
   pages that have a hero photograph, that photograph sits inside the SAME
   panel directly beneath, not a separate section. Adopted here in Nexpert's
   own tokens, type and content; nothing of the reference's own code, text or
   photography is reused. */
.page-head { padding:clamp(56px,6.5vw,104px) var(--pad) clamp(48px,5.5vw,80px); }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 clamp(32px,3.8vw,50px); color:var(--muted); font-size:.8rem; }
.breadcrumb a { border-bottom:1px solid transparent; transition:border-color .18s ease; }
.breadcrumb a:hover { border-color:currentColor; }
.breadcrumb span[aria-hidden] { opacity:.5; }
.breadcrumb [aria-current="page"] { color:var(--ink); }
.page-head-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px); align-items:start; }
.page-head .section-title { margin:0; max-width:14ch; }
.page-head-intro { padding-top:clamp(6px,1vw,14px); }
.page-head-intro .body-lg,.page-head .body-lg { max-width:46ch; }
.page-head-intro .body-lg + .body-lg,.page-head .body-lg + .body-lg { margin-top:22px; color:var(--muted); font-size:1rem; font-weight:300; line-height:1.6; }
.page-head-media { margin-top:clamp(34px,4vw,54px); height:clamp(280px,32vw,460px); overflow:hidden; border-radius:15px; background:#d8d6cf; }
.result-count { margin:clamp(30px,3vw,42px) 0 0; color:var(--muted); font-size:.86rem; }

/* ---- Category filter row: the visual link between home.php and archive.php -- */
.filter-row { display:flex; flex-wrap:wrap; gap:10px; margin:clamp(34px,3.6vw,52px) 0 0; padding:0; list-style:none; }
.filter-row a { display:inline-flex; padding:10px 18px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.84rem; transition:border-color .18s ease,color .18s ease,background .18s ease; }
.filter-row a:hover { border-color:var(--ink); color:var(--ink); }
.filter-row a[aria-current="page"] { border-color:transparent; background:var(--ink); color:var(--paper); }

/* ---- Featured lead item: the homepage split panel, reused for the newest post */
.featured { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); min-height:clamp(420px,44vw,580px); }
.featured-media { min-height:clamp(300px,34vw,580px); overflow:hidden; background:#d8d6cf; }
.featured-media img { transition:transform .6s ease; }
.featured:hover .featured-media img { transform:scale(1.02); }
.featured-copy { display:flex; flex-direction:column; justify-content:center; padding:var(--pad); }
.featured-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 24px; font-size:.77rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.featured-meta .cat { color:var(--brown); }
.featured-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--gold); }
.featured-meta time { color:var(--muted); font-weight:400; letter-spacing:.08em; }
.featured-copy h2 { max-width:22ch; margin:0; font-size:clamp(2rem,3.2vw,3.4rem); font-weight:400; line-height:1.06; letter-spacing:-.04em; text-wrap:balance; }
.featured-copy p { max-width:52ch; margin:26px 0 0; color:var(--muted); font-size:1.05rem; font-weight:300; line-height:1.66; }
.featured-copy .text-link { align-self:flex-start; margin-top:clamp(30px,3vw,42px); }

/* ---- Ruled index: the listing pattern.
   WEBSITE_DIRECTION.md prefers "ruled indexes over decorative card grids", and
   the homepage services table already establishes the device, so the listing
   reuses it rather than repeating the image-overlay card grid. ------------- */
.index-section { padding:clamp(70px,8vw,124px) var(--pad) clamp(62px,7vw,104px); }
.index-head { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; margin-bottom:clamp(38px,4vw,58px); }
.index-head h2 { margin:0; font-size:clamp(1.5rem,2vw,2rem); font-weight:400; letter-spacing:-.025em; }
.index-head .result-count { margin:0; }
.post-index { border-top:1px solid var(--ink); }
.post-row { display:grid; grid-template-columns:minmax(112px,.5fr) minmax(280px,2fr) minmax(150px,.65fr) 28px; gap:clamp(20px,2.4vw,38px); align-items:baseline; padding:clamp(28px,2.8vw,38px) 0; border-bottom:1px solid var(--line); transition:background .2s ease; }
.post-row:hover { background:rgba(228,225,218,.42); }
.post-date { color:var(--muted); font-size:.82rem; letter-spacing:.04em; }
.post-row h3 { max-width:34ch; margin:0; font-size:clamp(1.2rem,1.85vw,1.85rem); font-weight:400; line-height:1.16; letter-spacing:-.028em; }
.post-row h3 + p { max-width:46ch; margin:12px 0 0; color:var(--muted); font-size:.97rem; font-weight:300; line-height:1.6; }
.post-cat { color:var(--brown); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.post-row .arrow { align-self:start; justify-self:end; margin-top:7px; color:var(--muted); transition:transform .2s ease,color .2s ease; }
.post-row:hover .arrow { color:var(--ink); transform:translateX(4px); }

/* ---- Pagination: neither previously designed surface needed one ---------- */
.pagination { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:clamp(48px,5vw,76px); }
.page-numbers { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.page-numbers a,.page-numbers span { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:999px; color:var(--muted); font-size:.92rem; transition:background .18s ease,color .18s ease; }
.page-numbers a:hover { background:rgba(59,58,56,.08); color:var(--ink); }
.page-numbers [aria-current="page"] { background:var(--ink); color:var(--paper); font-weight:700; }
.page-numbers .gap { min-width:24px; padding:0; }
.page-step { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--muted); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:color .18s ease; }
.page-step:hover { color:var(--ink); }
.page-step[aria-disabled="true"] { opacity:.35; pointer-events:none; }

/* ---- Empty state, for an archive or search with no results --------------- */
.empty-state { max-width:56ch; padding:clamp(6px,.8vw,14px) 0 clamp(18px,1.8vw,30px); }
.empty-state h2 { margin:0; font-size:clamp(1.6rem,2.4vw,2.4rem); font-weight:400; line-height:1.12; letter-spacing:-.03em; }
.empty-state p { margin:20px 0 0; color:var(--muted); font-size:1.05rem; font-weight:300; line-height:1.66; }
.empty-state .text-link { margin-top:clamp(28px,3vw,40px); }

@media (max-width:980px) {
  .featured { grid-template-columns:1fr; }
  .featured-media { min-height:360px; }
  .post-row { grid-template-columns:minmax(96px,.45fr) minmax(0,2fr) 24px; }
  .post-cat { display:none; }
  .page-head-grid { grid-template-columns:1fr; gap:24px; }
  .page-head .section-title { max-width:20ch; }
}


@media (max-width:900px) {
  .site-nav { grid-template-columns:1fr auto; }
  .desktop-nav { display:none; }
  .nav-actions { display:none; }
  .menu-button { display:flex; }
  .header-menu { display:block; }
}


@media (max-width:680px) {
  :root { --radius:16px; --gutter:7px; --pad:24px; --section-space:76px; }
  .page { padding:var(--gutter); }
  .site-nav { padding:18px; }
  .wordmark { font-size:1.6rem; }
  .header-menu { top:66px; right:18px; width:calc(100% - 36px); }
  .page-head { padding:40px 24px 44px; }
  .breadcrumb { margin-bottom:26px; font-size:.76rem; }
  .page-head-grid { grid-template-columns:1fr; gap:22px; }
  .page-head .section-title { max-width:none; }
  .page-head-intro { padding-top:0; }
  .page-head-media { margin-top:26px; height:240px; }
  .filter-row { gap:8px; }
  .filter-row a { padding:9px 15px; font-size:.8rem; }
  .featured-media { min-height:260px; }
  .featured-copy { padding:34px 24px 40px; }
  .featured-copy h2 { max-width:none; font-size:clamp(1.8rem,8vw,2.4rem); }
  .index-section { padding:56px 24px 48px; }
  .index-head { align-items:flex-start; flex-direction:column; gap:14px; }
  /* The date leads its own line on a phone so the title keeps the full width. */
  .post-row { grid-template-columns:1fr 24px; gap:6px 14px; padding:24px 0; }
  .post-date { grid-column:1 / -1; }
  .post-row h3 { max-width:none; font-size:1.2rem; }
  .post-row h3 + p { max-width:none; }
  .post-row .arrow { grid-column:2; grid-row:2; align-self:start; margin-top:1px; }
  .featured-meta { gap:8px 12px; }
  .featured-meta .cat { flex:0 0 100%; }
  .featured-meta .cat + .dot { display:none; }
  .pagination { align-items:flex-start; flex-direction:column; gap:18px; }
  .empty-state { padding:4px 0 8px; }
}


@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* ---- Card grid: the ALTERNATIVE listing version -------------------------
   Used only by insights-cards.html. This is the image-overlay card idiom the
   homepage Insights section already uses, offered against the ruled index in
   insights.html so the two can be compared rather than argued about. Keeping
   both in one stylesheet means the page head, filter row, pagination, lead
   magnet and footer are provably identical between the versions. */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.post-card { position:relative; min-height:420px; display:block; overflow:hidden; border:0; border-radius:16px; background:#4f4d48; color:#fff; transition:transform .25s ease; }
.post-card::after { position:absolute; z-index:1; inset:0; background:linear-gradient(0deg,rgba(22,24,21,.90) 0%,rgba(22,24,21,.62) 42%,rgba(22,24,21,.28) 72%,rgba(22,24,21,.14) 100%); content:""; }
.post-card:hover { transform:translateY(-4px); }
.card-media { position:absolute; inset:0; height:100%; display:block; overflow:hidden; background:#d7d4cc; }
.card-media img { transition:transform .5s ease; }
.post-card:hover .card-media img { transform:scale(1.03); }
.card-body { position:relative; z-index:2; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; }
.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 14px; font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.card-meta .cat { color:#e8c98a; }
.card-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--gold); }
.card-meta time { color:rgba(255,255,255,.78); font-weight:400; letter-spacing:.07em; }
.post-card h3 { margin:0; font-size:clamp(1.3rem,1.9vw,1.8rem); font-weight:400; line-height:1.15; letter-spacing:-.032em; }
.post-card p { max-width:44ch; margin:14px 0 0; color:rgba(255,255,255,.8); font-size:.97rem; font-weight:300; line-height:1.6; }
.post-card .arrow { align-self:flex-end; margin-top:24px; }
/* The newest item takes two columns and more height, the card-grid equivalent
   of the ruled version's featured split panel. */
.post-card.is-lead { grid-column:span 2; min-height:560px; }
.post-card.is-lead .card-body { min-height:560px; padding:clamp(30px,3vw,44px); }
.post-card.is-lead h3 { max-width:26ch; font-size:clamp(1.8rem,2.9vw,3rem); line-height:1.06; letter-spacing:-.04em; }
.card-grid + .pagination { margin-top:clamp(48px,5vw,76px); }

@media (max-width:980px) {
  .card-grid { grid-template-columns:1fr 1fr; }
  .post-card.is-lead { grid-column:1 / -1; min-height:440px; }
  .post-card.is-lead .card-body { min-height:440px; }
}


@media (max-width:680px) {
  .card-grid { grid-template-columns:1fr; }
  .post-card,.card-body { min-height:340px; }
  .post-card.is-lead,.post-card.is-lead .card-body { min-height:400px; }
  .card-body { padding:24px; }
  .card-meta { gap:8px 12px; margin-bottom:12px; }
  .card-meta .cat { flex:0 0 100%; }
  .card-meta .cat + .dot { display:none; }
  .post-card.is-lead h3 { max-width:none; font-size:1.7rem; }
  .post-card p { display:none; }
}


/* ---- Long-form prose, shared with preview/article.html ------------------ */
/* ---- Long-form body ---------------------------------------------------
   The homepage has no sustained-reading scale; this is it. One measure,
   one vertical rhythm, everything else hangs off --flow. */
.article-body { padding:clamp(62px,7vw,110px) var(--pad) clamp(70px,8vw,120px); }
.prose { max-width:var(--measure); }
.prose > * { margin-top:0; margin-bottom:0; }
.prose > * + * { margin-top:var(--flow); }
.prose p { font-size:clamp(1.06rem,1.18vw,1.18rem); font-weight:300; line-height:1.78; }
.prose .lede { font-size:clamp(1.16rem,1.4vw,1.32rem); line-height:1.68; }
.prose h2 { max-width:26ch; margin-top:clamp(52px,5.5vw,84px); font-size:clamp(1.75rem,2.5vw,2.5rem); font-weight:400; line-height:1.12; letter-spacing:-.035em; }
.prose h3 { margin-top:clamp(38px,3.6vw,52px); font-size:clamp(1.16rem,1.45vw,1.38rem); font-weight:700; line-height:1.35; }
.prose h2 + p,.prose h3 + p { margin-top:clamp(14px,1.2vw,18px); }
.prose a:not(.circle-link) { border-bottom:1px solid rgba(59,58,56,.45); transition:border-color .18s ease; }
.prose a:not(.circle-link):hover { border-color:var(--ink); }
.prose strong { font-weight:700; }
.prose ul,.prose ol { padding-left:1.35em; font-size:clamp(1.06rem,1.18vw,1.18rem); font-weight:300; line-height:1.72; }
.prose > ul,.prose > ol { margin-top:clamp(26px,2.2vw,34px); }
.prose li + li { margin-top:.6em; }
.prose li::marker { color:var(--earth); }
.prose blockquote { margin:clamp(44px,4.5vw,68px) 0; padding-left:clamp(22px,2.4vw,34px); border-left:2px solid var(--gold); }
.prose blockquote p { max-width:34ch; font-size:clamp(1.4rem,2.1vw,2rem); font-weight:300; line-height:1.38; letter-spacing:-.02em; }
.prose blockquote cite { display:block; margin-top:18px; color:var(--muted); font-size:.84rem; font-style:normal; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.prose figure { margin:clamp(44px,4.5vw,68px) 0; }
.prose figure .frame { height:clamp(240px,26vw,420px); overflow:hidden; border-radius:15px; background:#d8d6cf; }
.prose hr { margin:clamp(52px,5.5vw,80px) 0; border:0; border-top:1px solid var(--line); }
/* Pull-out list, built from the About panel's ruled-credential pattern so it
   does not introduce a new component. */
.takeaways { margin:clamp(46px,4.6vw,70px) 0; padding:clamp(28px,3vw,40px) clamp(26px,2.8vw,38px); border:1px solid var(--line); border-radius:15px; background:rgba(228,225,218,.42); }
.takeaways h2 { max-width:none; margin:0 0 6px; font-size:.77rem; font-weight:700; letter-spacing:.13em; line-height:1.4; text-transform:uppercase; }
.takeaways ul { margin:0; padding:0; list-style:none; font-size:1rem; }
.takeaways li { padding:15px 0; border-bottom:1px solid var(--line); font-weight:300; line-height:1.6; }
.takeaways li:last-child { border-bottom:0; padding-bottom:0; }
.takeaways li + li { margin-top:0; }

.page-body { padding:clamp(62px,7vw,110px) var(--pad) clamp(70px,8vw,120px); }
.page-body .prose + .prose { margin-top:clamp(52px,5.5vw,84px); }

/* ---- Search field: new, for search.php and the 404 page ------------------ */
.search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; max-width:620px; margin:clamp(32px,3.4vw,46px) 0 0; padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--white); }
.search-form input { min-width:0; min-height:58px; padding:0 18px; border:0; background:transparent; color:var(--ink); font-size:1.06rem; }
.search-form input::placeholder { color:rgba(59,58,56,.58); }
.search-form button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:58px; padding:0 24px; border:0; border-radius:10px; background:var(--ink); color:#fff; cursor:pointer; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.search-term { font-weight:700; }

/* ---- 404 ---------------------------------------------------------------- */
.notfound { min-height:clamp(460px,52vh,660px); display:flex; flex-direction:column; justify-content:center; padding:clamp(70px,8vw,124px) var(--pad); }
.notfound .code { margin:0 0 26px; color:var(--brown); font-size:.77rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.notfound h1 { max-width:22ch; margin:0; font-size:clamp(2.4rem,5vw,4.8rem); font-weight:400; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.notfound p { max-width:56ch; margin:clamp(26px,2.8vw,38px) 0 0; color:var(--muted); font-size:clamp(1.08rem,1.5vw,1.32rem); font-weight:300; line-height:1.62; }
.notfound-links { display:flex; flex-wrap:wrap; gap:14px; margin:clamp(34px,3.6vw,48px) 0 0; padding:0; list-style:none; }
.notfound-links a { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border:1px solid var(--line); border-radius:999px; font-size:.88rem; transition:border-color .18s ease,background .18s ease; }
.notfound-links a:hover { border-color:var(--ink); background:rgba(228,225,218,.5); }

/* ---- Block patterns: the page-building kit ------------------------------
   Every pattern below is an existing device from an approved surface, named so
   a page can be assembled from them instead of inventing new components. */
.pattern { border-top:1px solid var(--ink); }
.pattern-label { display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin:0; padding:22px 0 0; }
.pattern-label strong { font-size:.77rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.pattern-label span { color:var(--muted); font-size:.86rem; font-weight:300; }
.pattern-demo { padding:clamp(34px,3.6vw,52px) 0 clamp(52px,5.5vw,84px); }
.pattern-demo .featured { overflow:hidden; border:1px solid var(--line); border-radius:15px; }

/* Pattern: ruled fact list, from the homepage About panel. */
.fact-list { max-width:var(--measure); margin:0; padding:0; border-top:1px solid var(--line); list-style:none; }
.fact-list li { padding:17px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.97rem; font-weight:300; }

/* Pattern: numbered steps, from the homepage approach panel. */
.steps { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,4vw,72px); margin:0; padding:0; list-style:none; }
.steps::before { position:absolute; top:31px; right:0; left:0; height:1px; background:rgba(181,109,70,.42); content:""; }
.steps li { display:flex; flex-direction:column; align-items:center; gap:26px; min-height:126px; text-align:center; }
.step-number { position:relative; z-index:1; width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #b56d46; border-radius:50%; background:var(--paper); color:#b56d46; font-size:1.32rem; }
.steps h3 { margin:0; font-size:clamp(1.12rem,1.55vw,1.5rem); font-weight:400; line-height:1.25; letter-spacing:-.025em; }

/* Pattern: two-column feature row. */
.feature-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,3.4vw,58px); }
.feature h3 { margin:0 0 12px; font-size:clamp(1.16rem,1.5vw,1.42rem); font-weight:700; line-height:1.3; }
.feature p { margin:0; color:var(--muted); font-size:1rem; font-weight:300; line-height:1.66; }

/* Pattern: ruled comparison table, for legal and service pages. */
.ruled-table { width:100%; border-collapse:collapse; font-size:.97rem; }
.ruled-table caption { margin-bottom:16px; color:var(--muted); font-size:.86rem; font-weight:300; text-align:left; }
.ruled-table th,.ruled-table td { padding:16px 18px 16px 0; border-bottom:1px solid var(--line); font-weight:300; line-height:1.55; text-align:left; vertical-align:top; }
.ruled-table thead th { border-bottom:1px solid var(--ink); color:var(--ink); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.table-scroll { overflow-x:auto; }

/* Pattern: quiet call-to-action panel, lighter than the lead magnet. */
.cta-panel { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(24px,3vw,48px); padding:clamp(34px,3.6vw,54px); border:1px solid var(--line); border-radius:15px; background:rgba(228,225,218,.42); }
.cta-panel h3 { max-width:26ch; margin:0; font-size:clamp(1.32rem,2vw,1.9rem); font-weight:400; line-height:1.18; letter-spacing:-.028em; }

/* Pattern: flat numbered grid -- new, adopted from the reference's "What We
   Value" section. No circle, no rule, just a small muted numeral sitting above
   a heading; three columns of plain text, nothing else. */
.pattern-demo .page-head-grid .section-title { font-size:clamp(1.9rem,3vw,3rem); }
.pattern-demo .page-head-intro .body-lg { font-size:1.05rem; }

.numbered-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,44px) clamp(28px,3vw,40px); }
.numbered-grid .num { display:block; margin-bottom:10px; color:var(--muted); font-size:.85rem; letter-spacing:.02em; }
.numbered-grid h3 { margin:0 0 10px; font-size:clamp(1.1rem,1.4vw,1.3rem); font-weight:400; letter-spacing:-.02em; }
.numbered-grid p { margin:0; color:var(--muted); font-size:.95rem; font-weight:300; line-height:1.6; }

/* Pattern: numbered image grid -- new, adopted from the reference's
   "Expertise & Projects" index. A photograph above the same flat numeral,
   heading and paragraph -- for an index of things that each deserve a
   picture, rather than the plain text-only grid above. */
.numbered-image-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,3.4vw,44px) clamp(28px,3vw,40px); }
.numbered-image-grid .frame { height:clamp(180px,20vw,260px); margin-bottom:20px; overflow:hidden; border-radius:14px; background:#d8d6cf; }
.numbered-image-grid .num { display:block; margin-bottom:10px; color:var(--muted); font-size:.85rem; letter-spacing:.02em; }
.numbered-image-grid h3 { margin:0 0 10px; font-size:clamp(1.1rem,1.4vw,1.3rem); font-weight:400; letter-spacing:-.02em; }
.numbered-image-grid p { margin:0; color:var(--muted); font-size:.95rem; font-weight:300; line-height:1.6; }

/* Pattern: underline form -- new, adopted from the reference's Contact page.
   An alternative to the boxed pill lead-magnet form for a page that needs a
   plainer, more document-like field: no border box, just a bottom rule that
   fills on focus, and a plain outlined pill button rather than a filled one. */
.underline-form { display:grid; gap:22px clamp(24px,3vw,40px); max-width:640px; }
.underline-form.has-2col { grid-template-columns:1fr 1fr; }
.underline-form label { display:block; margin-bottom:8px; color:var(--muted); font-size:.82rem; }
.underline-form input,.underline-form textarea { width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font-size:1rem; transition:border-color .18s ease; }
.underline-form input:focus,.underline-form textarea:focus { border-color:var(--ink); outline:0; }
.underline-form textarea { resize:vertical; min-height:70px; }
.underline-form .full { grid-column:1 / -1; }
.underline-form button { justify-self:start; margin-top:6px; padding:14px 30px; border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; transition:background .18s ease,color .18s ease; }
.underline-form button:hover { background:var(--ink); color:var(--paper); }

@media (max-width:680px) {
  .numbered-grid,.numbered-image-grid { grid-template-columns:1fr; }
  .underline-form.has-2col { grid-template-columns:1fr; }
}


/* Pattern: FAQ disclosure, from the homepage FAQ panel. */
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:first-of-type { border-top:1px solid var(--ink); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; cursor:pointer; list-style:none; font-size:clamp(1.05rem,1.4vw,1.28rem); font-weight:400; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; color:var(--gold); font-size:1.5rem; font-weight:300; }
.faq-list details[open] summary::after { content:"\2212"; }
.faq-list .answer { max-width:var(--measure); margin:0; padding:0 0 26px; color:var(--muted); font-size:1rem; font-weight:300; line-height:1.7; }

@media (max-width:980px) {
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps::before { display:none; }
  .feature-row { grid-template-columns:1fr; }
}


@media (max-width:680px) {
  .page-body { padding:52px 24px 62px; }
  .prose blockquote { margin:38px 0; padding-left:18px; }
  .prose blockquote p { max-width:none; font-size:1.32rem; }
  .prose figure .frame { height:220px; }
  .search-form { grid-template-columns:1fr; margin-top:26px; }
  .search-form input { min-height:54px; border:1px solid rgba(59,58,56,.24); border-radius:10px; background:var(--white); }
  .search-form button { min-height:52px; justify-content:space-between; padding:0 18px; }
  .notfound { padding:56px 24px; }
  .notfound h1 { max-width:none; }
  .notfound-links a { padding:12px 18px; font-size:.84rem; }
  .pattern-demo { padding:28px 0 44px; }
  .steps { grid-template-columns:1fr; gap:0; }
  .steps li { align-items:flex-start; flex-direction:row; gap:20px; min-height:96px; text-align:left; }
  .step-number { flex:0 0 64px; }
  .cta-panel { padding:26px 24px; }
}


/* The Trusted-by logo row, copied from the approved homepage so the pattern set
   can show it without redesigning it. */
.logos { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,48px); }
.logo { min-height:116px; display:flex; align-items:center; justify-content:center; padding:20px 12px; }
.logo img { max-width:200px; height:60px; object-fit:contain; filter:grayscale(1); opacity:.78; }
.logo.vayla img { max-width:250px; height:76px; transform:scale(1.12); }
.logo.lut img { filter:grayscale(1) invert(1) brightness(.38); }
@media (max-width:980px) {
  .logos { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:680px) {
  .logo { min-height:96px; padding:18px; }
  .logo img { height:40px; }
  .logo.vayla img { height:52px; transform:scale(1.05); }
}


/* ---- Booking call to action and footer: taken from the current homepage
   (template-parts/front-page/contact.php and footer.php are reused as-is). */
.lead { min-height:540px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); align-items:end; gap:clamp(32px,4vw,64px); padding:var(--section-space) var(--pad); background:#c9956c; }
.lead h2 { max-width:760px; margin:0; font-size:clamp(2.5rem,4.65vw,5.15rem); font-weight:400; line-height:.99; letter-spacing:-.052em; text-wrap:balance; }
.lead-copy > p:last-child { max-width:620px; margin:30px 0 0; color:rgba(59,58,56,.8); font-size:1.06rem; font-weight:300; line-height:1.62; }
.lead-form form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:10px; border:1px solid rgba(59,58,56,.18); border-radius:14px; background:rgba(248,247,243,.94); box-shadow:0 18px 42px rgba(59,58,56,.12); }
.lead-form input,.lead-form button { min-height:62px; border:0; background:transparent; color:var(--ink); }
.lead-cta-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:22px 34px; border-radius:10px; background:var(--ink); color:#fff; cursor:pointer; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; transition:background .2s ease; }
.lead-cta-button:hover { background:#232220; }
.lead-form input { min-width:0; padding:0 18px; font-size:1.08rem; }
.lead-form input::placeholder { color:rgba(59,58,56,.62); }
.lead-form button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 22px; border-radius:10px; background:var(--ink); color:#fff; cursor:pointer; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.site-footer { display:grid; grid-template-columns:minmax(280px,1.35fr) repeat(3,minmax(150px,.65fr)); gap:clamp(40px,6vw,100px); padding:clamp(82px,10vw,150px) var(--pad) 34px; background:#343330; color:rgba(255,255,255,.8); }
.site-footer .wordmark { margin-bottom:34px; }
.footer-lead p { max-width:420px; margin:0; font-size:clamp(1.05rem,1.45vw,1.25rem); font-weight:300; line-height:1.62; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:.92rem; line-height:1.6; }
.footer-column h2 { margin:0 0 18px; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.footer-column address { margin-top:12px; font-style:normal; }
.footer-column a:hover { color:#fff; }
.footer-bottom { grid-column:1 / -1; display:flex; justify-content:space-between; gap:30px; margin-top:clamp(60px,9vw,130px); padding-top:26px; border-top:1px solid rgba(255,255,255,.18); font-size:.76rem; }
.lead-list { margin:18px 0 0; padding-left:22px; color:rgba(59,58,56,.85); font-size:1.02rem; font-weight:300; line-height:1.7; }
.lead-list li { margin-bottom:4px; }
@media (max-width:980px) {
  .site-footer { grid-template-columns:1.2fr repeat(3,1fr); gap:38px; }
}
@media (max-width:900px) {
  .site-footer { grid-template-columns:1fr 1fr 1fr; }
  .footer-lead { grid-column:1 / -1; max-width:620px; }
}
@media (max-width:680px) {
  .lead { min-height:620px; grid-template-columns:1fr; align-content:space-between; gap:40px; }
  .lead-form form { grid-template-columns:1fr; }
  .lead-form input { min-height:56px; border:1px solid rgba(59,58,56,.24); border-radius:10px; background:var(--white); }
  .lead-form button { min-height:54px; justify-content:space-between; padding-right:18px; padding-left:18px; }
  .lead-cta-button { min-height:54px; width:100%; justify-content:space-between; padding-right:18px; padding-left:18px; }
  .site-footer { grid-template-columns:1fr 1fr; gap:52px 28px; padding:78px 24px 28px; }
  .footer-lead { grid-column:1 / -1; }
  .footer-bottom { flex-direction:column; grid-column:1 / -1; }
}

/* ---- Article: from preview/article.html --------------------------------- */
/* ---- Article header --------------------------------------------------- */
    .article-head { padding:clamp(52px,6vw,92px) var(--pad) clamp(44px,5vw,72px); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 26px; font-size:.77rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.article-category { color:var(--brown); }
.article-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--gold); }
.article-meta time,.article-meta .reading { color:var(--muted); font-weight:400; letter-spacing:.08em; }
.article-title { max-width:20ch; margin:0; font-size:clamp(2.5rem,5.2vw,5rem); font-weight:400; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.article-standfirst { max-width:60ch; margin:clamp(28px,3vw,40px) 0 0; color:var(--muted); font-size:clamp(1.16rem,1.6vw,1.44rem); font-weight:300; line-height:1.58; }
.byline { display:flex; align-items:center; gap:16px; margin-top:clamp(38px,4vw,56px); padding-top:26px; border-top:1px solid var(--line); }
.byline-initials { flex:0 0 46px; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(181,109,70,.5); border-radius:50%; color:#b56d46; font-size:.82rem; font-weight:700; letter-spacing:.04em; }
.byline-name { margin:0; font-size:.97rem; font-weight:700; }
.byline-role { margin:2px 0 0; color:var(--muted); font-size:.86rem; font-weight:300; }
.article-figure { margin:0; }
.article-figure .frame { height:clamp(320px,42vw,620px); overflow:hidden; border-radius:var(--radius); background:#d8d6cf; }
.figure-caption { max-width:72ch; margin:16px 0 0; padding:0; color:var(--muted); font-size:.84rem; font-weight:300; line-height:1.55; }
.panel > .article-figure > .frame { border-radius:0; }
.article-foot { max-width:var(--measure); margin:clamp(60px,6vw,92px) 0 0; padding-top:34px; border-top:1px solid var(--ink); }
.article-foot .label { margin-bottom:16px; }
.tags { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(34px,3.4vw,48px); padding:0; list-style:none; }
.tags a { display:inline-flex; padding:8px 15px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.8rem; transition:border-color .18s ease,color .18s ease; }
.tags a:hover { border-color:var(--ink); color:var(--ink); }
.author-card { display:grid; grid-template-columns:56px minmax(0,1fr); gap:22px; align-items:start; }
.author-card .byline-initials { flex:none; width:56px; height:56px; font-size:.9rem; }
.author-card .author-bio { margin:10px 0 0; color:var(--muted); font-size:.97rem; font-weight:300; line-height:1.68; }
.author-card .text-link { margin-top:18px; }
/* ---- Related posts: the homepage insight card, reused unchanged -------- */
    .related { padding:var(--section-space) var(--pad); }
.related-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:60px; }
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.insight { position:relative; min-height:440px; display:block; overflow:hidden; border:0; border-radius:16px; background:#4f4d48; color:#fff; transition:transform .25s ease; }
.insight::after { position:absolute; z-index:1; inset:0; background:linear-gradient(0deg,rgba(22,24,21,.82),rgba(22,24,21,.08) 72%); content:""; }
.insight:hover { transform:translateY(-4px); }
.insight-media { position:absolute; inset:0; height:100%; display:block; overflow:hidden; background:#d7d4cc; }
.insight-media img { transition:transform .4s ease; }
.insight:hover .insight-media img { transform:scale(1.025); }
.insight-body { position:relative; z-index:2; min-height:440px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; color:#fff; }
.insight-date { font-size:.75rem; color:rgba(255,255,255,.76); }
.insight h3 { margin:16px 0 28px; font-size:clamp(1.35rem,2vw,1.85rem); font-weight:400; line-height:1.14; letter-spacing:-.035em; }
.insight-body .arrow { align-self:flex-end; }
@media (max-width:980px) {
  .insight-grid { grid-template-columns:1fr 1fr; }
  .insight:first-child { grid-column:1 / -1; min-height:300px; }
  .insight:first-child .insight-body { min-height:300px; }
}
@media (max-width:680px) {
  .article-head { padding:40px 24px 44px; }
  .article-meta { gap:8px 12px; }
  .article-meta .article-category { flex:0 0 100%; }
  .article-meta .article-category + .dot { display:none; }
  .article-title { max-width:none; font-size:clamp(2.2rem,9.4vw,3rem); }
  .article-standfirst { font-size:1.1rem; }
  .article-figure .frame { height:260px; }
  .related { padding:var(--section-space) 24px; }
  .related-head { align-items:flex-start; flex-direction:column; }
  .insight-grid { grid-template-columns:1fr; }
  .insight,.insight-body { min-height:300px; }
  .insight:first-child { grid-column:auto; }
  .author-card { grid-template-columns:1fr; gap:16px; }
}

/* ---- WordPress integration (not in the preview designs) ------------------ */
/* theme.json gives the body line-height 1.55; the designs use the browser default. */
body.nexpert-site { line-height:normal; }
/* WordPress adds the class "page" to <body> on static pages (including a static
   front page); the design's .page frame rule must not apply to the body itself. */
body.page { width:auto; margin:0; padding:0; }
.nexpert-skip-link { position:absolute; left:-9999px; top:0; z-index:100000; padding:12px 18px; border-radius:999px; background:var(--paper); color:var(--ink); }
.nexpert-skip-link:focus { left:16px; top:16px; }
.admin-bar .header-menu { top:calc(76px + 32px); }
.site-header { position:relative; }

/* Block content (pages and posts written in the block editor). Text blocks keep
   the reading measure; layout blocks (groups, covers, columns, wide/full
   alignments) may use the whole panel so existing page designs keep working. */
.entry-content.prose { max-width:none; }
.entry-content > * { max-width:var(--measure); }
.entry-content > :is(.wp-block-group,.wp-block-cover,.wp-block-columns,.wp-block-media-text,.wp-block-gallery,.wp-block-table,.alignwide,.alignfull,.wp-block-image.alignwide,.wp-block-image.alignfull,.wp-block-embed) { max-width:none; }
.entry-content :is(.wp-block-group,.wp-block-cover).has-background { padding:clamp(24px,3vw,48px); border-radius:16px; }
.entry-content .wp-block-image img,.entry-content .wp-block-cover img { height:auto; }
.entry-content .wp-block-cover img.wp-block-cover__image-background { height:100%; }
.entry-content .wp-block-image { margin-left:0; margin-right:0; }
.entry-content .wp-block-image img,.entry-content .wp-block-media-text__media img { border-radius:12px; }
.entry-content .wp-block-buttons { gap:12px; }
.entry-content .wp-block-button__link { text-decoration:none; border-bottom:0; }
.entry-content table { width:100%; border-collapse:collapse; font-size:1rem; }
.entry-content th,.entry-content td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; }
.entry-content iframe { max-width:100%; }

/* ---- Sectioned page template (page-sections.php) --------------------------
   Content is a stack of <section class="panel page-body"> blocks built from the
   preview/patterns.html sections. */
.nexpert-sections > * { max-width:none; }
.nexpert-sections > .panel.page-body { scroll-margin-top:24px; }
.nexpert-sections .stack > * + * { margin-top:clamp(30px,3.2vw,48px); }
.nexpert-sections .section-head .section-title { max-width:18ch; }
.nexpert-sections .section-head .body-lg { margin-top:22px; }
.nexpert-sections .feature-row { align-items:start; }
.nexpert-sections .feature-row .prose p + p { margin-top:var(--flow); }
.nexpert-sections .feature-row .text-link { margin-top:clamp(24px,2.4vw,34px); }
.nexpert-sections .fact-list { margin-top:4px; }
.nexpert-sections .frame img,.nexpert-sections .featured-media img { width:100%; height:100%; object-fit:cover; }
.nexpert-sections .numbered-image-grid .text-link { margin-top:18px; }
.nexpert-sections .post-row { color:inherit; }
.nexpert-sections .process-figure { max-width:760px; margin:0; }
.nexpert-sections .process-figure img { width:100%; height:auto; border-radius:15px; }
/* Highlighted call to action: the homepage booking section's gold with its dark button. */
.cta-panel.is-gold { border-color:transparent; background:#DFB66F; }
.cta-panel.is-gold h3 { color:var(--ink); }
.nexpert-sections .process-row { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; }
.nexpert-sections .faq-list { border-bottom:1px solid var(--line); }