/* =====================================================================
   IVAR — Page system v1 (Phase A)
   Brings the service pages, the services hub (and next: legal, 404, blog)
   into the approved redesign language (Cormorant Garamond / Outfit, calm,
   left-aligned, hairline structure). Scoped by <main class="pg …"> so it
   never touches the home / about / work / contact pages and needs no JS.
   Colours come only from the existing theme tokens → light + dark work.
   ===================================================================== */

/* ---------- shared page header ---------- */
.pg .breadcrumbs{padding-top:clamp(108px,15vh,150px);font-family:var(--fb);font-size:.82rem;letter-spacing:.02em}
.pg .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:0;color:var(--text-3)}
.pg .breadcrumbs li{display:inline-flex;align-items:center;gap:10px}
.pg .breadcrumbs li+li::before{content:'/';color:var(--text-3);opacity:.7}
.pg .breadcrumbs a{color:var(--text-2);text-decoration:none;transition:color var(--dur-fast)}
.pg .breadcrumbs a:hover{color:var(--accent-text)}
.pg .breadcrumbs [aria-current]{color:var(--text-1)}

.pg .page-header{padding-top:clamp(120px,18vh,180px);padding-bottom:clamp(28px,5vw,56px)}
.pg .breadcrumbs + .page-header,.pg .breadcrumbs + article > .page-header:first-child{padding-top:clamp(28px,5vw,56px)}
.pg .page-header__title{
  display:block;margin:0;max-width:15ch;
  font-family:var(--fd)!important;font-weight:500;
  font-size:clamp(2.75rem,7.2vw,6.25rem);line-height:.96;letter-spacing:-.02em;
  text-transform:none!important;color:var(--text-0)!important;
  background:none!important;-webkit-text-fill-color:currentColor!important;
}
.pg .page-header__title::before,.pg .page-header__title::after{display:none!important}
[dir=rtl] .pg .page-header__title{letter-spacing:0;line-height:1.2}
.pg .page-header .eyebrow{margin-bottom:clamp(14px,2vw,22px)}

/* ---------- service page: hero ---------- */
.pg .service-detail__lead{
  font-family:var(--fd);font-weight:500;color:var(--text-0);
  font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.3;max-width:34ch;
  margin-top:clamp(22px,3vw,38px);
}
[dir=rtl] .pg .service-detail__lead{line-height:1.6}
.pg--service .service-detail__intro{
  font-family:var(--fb);font-weight:400;color:var(--text-1);
  font-size:var(--fs-body-lg);line-height:1.75;max-width:62ch;margin-top:18px;
}

/* ---------- service page: content sections ---------- */
.pg--service .service-detail__section{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(32px,6vw,96px);align-items:start;
  padding-block:clamp(48px,7vw,96px);
  border-top:1px solid var(--border-hairline);
}
.pg--service .service-detail__section-head{
  grid-column:1;grid-row:1 / span 80;align-self:start;
  position:sticky;top:calc(var(--nav-h) + 32px);
}
.pg--service .service-detail__section > :not(.service-detail__section-head){grid-column:2}
.pg--service .service-detail__section:not(:has(> .service-detail__section-head)) > *{grid-column:1 / -1}
.pg--service .service-detail__section-head h2{
  margin:0;max-width:16ch;color:var(--text-0);
  font-family:var(--fd);font-weight:500;
  font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.08;letter-spacing:-.01em;
}
[dir=rtl] .pg--service .service-detail__section-head h2{letter-spacing:0;line-height:1.35}
.pg--service .service-detail__section > p{
  margin:0 0 1.1em;max-width:62ch;color:var(--text-1);
  font-family:var(--fb);font-size:var(--fs-body-lg);line-height:1.75;
}
.pg--service .service-detail__section > p:last-child{margin-bottom:0}

/* accordion rows (h3 + explanation) */
.pg--service .service-detail__accordion{border-top:1px solid var(--border-hairline)}
.pg--service .service-detail__accordion:last-child,
.pg--service .service-detail__accordion:has(+ :not(.service-detail__accordion)){border-bottom:1px solid var(--border-hairline)}
.pg--service .service-detail__section > p + .service-detail__accordion{margin-top:clamp(18px,2.5vw,28px)}
.pg--service .service-detail__accordion summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:var(--touch-min);padding:20px 0;
}
.pg--service .service-detail__accordion summary::-webkit-details-marker{display:none}
.pg--service .service-detail__accordion summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:6px}
.pg--service .service-detail__accordion-title{
  font-family:var(--fd);font-weight:500;color:var(--text-0);
  font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.25;
  transition:color var(--dur-fast) ease;
}
.pg--service .service-detail__accordion summary:hover .service-detail__accordion-title,
.pg--service .service-detail__accordion[open] .service-detail__accordion-title{color:var(--accent-text)}
.pg--service .service-detail__accordion-icon{
  position:relative;flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border-hairline-strong);
  transition:border-color var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);
}
.pg--service .service-detail__accordion-icon::before,
.pg--service .service-detail__accordion-icon::after{
  content:'';position:absolute;top:50%;left:50%;width:11px;height:1.5px;border-radius:2px;
  background:var(--text-0);transform:translate(-50%,-50%);
  transition:transform var(--dur-med) var(--ease-out),background var(--dur-fast);
}
.pg--service .service-detail__accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.pg--service .service-detail__accordion[open] .service-detail__accordion-icon{border-color:var(--accent-text)}
.pg--service .service-detail__accordion[open] .service-detail__accordion-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.pg--service .service-detail__accordion[open] .service-detail__accordion-icon::before,
.pg--service .service-detail__accordion[open] .service-detail__accordion-icon::after{background:var(--accent-text)}
.pg--service .service-detail__accordion-body p{
  margin:0;padding:0 0 24px;max-width:60ch;color:var(--text-1);
  font-family:var(--fb);font-size:var(--fs-body);line-height:1.75;
}
.pg--service .service-detail__sub h3{
  margin:28px 0 10px;color:var(--text-0);
  font-family:var(--fd);font-weight:500;font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.25;
}

/* ---------- related guides + related services ---------- */
.pg .service-related,.pg .service-links,.pg .blog-related,.pg .article-services{border-top:1px solid var(--border-hairline)}
.pg .section-head h2,
.pg--service .service-links .section-head h2{font-family:var(--fd);font-weight:500;font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.08;color:var(--text-0)}
.pg .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(16px,2vw,24px)}
.pg .blog-card{
  position:relative;padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);
  background:var(--bg-1);border:1px solid var(--border-hairline);
  transition:border-color var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);
}
.pg .blog-card:hover{border-color:var(--accent-text);transform:translateY(-2px)}
.pg .blog-card__tag{font-family:var(--fb);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0 0 14px}
.pg .blog-card__title{font-family:var(--fd);font-weight:500;font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.2;margin:0 0 10px}
.pg .blog-card__title a{color:var(--text-0);text-decoration:none}
.pg .blog-card__title a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.pg .blog-card__text{color:var(--text-2);font-family:var(--fb);line-height:1.65;margin:0}
.pg .service-links__list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pg .service-links__list a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--r-full);
  border:1px solid var(--border-hairline-strong);color:var(--text-0);text-decoration:none;
  font-family:var(--fb);font-size:.95rem;
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast);
}
.pg .service-links__list a:hover{border-color:var(--accent-text);color:var(--accent-text);background:var(--accent-gradient-soft)}

/* ---------- legal pages ---------- */
.pg--legal .page-header h1{
  margin:0;max-width:18ch;color:var(--text-0);
  font-family:var(--fd);font-weight:500;font-size:clamp(2.4rem,5.6vw,4.75rem);line-height:1;letter-spacing:-.02em;
  text-transform:none;background:none;-webkit-text-fill-color:currentColor;
}
[dir=rtl] .pg--legal .page-header h1{letter-spacing:0;line-height:1.25}
.pg--legal .page-header p{max-width:60ch;color:var(--text-1);font-size:var(--fs-body-lg);line-height:1.7}
.pg--legal .legal{max-width:var(--container-max);border-top:1px solid var(--border-hairline);padding-top:clamp(28px,4vw,48px)}
.pg--legal .legal > *{max-width:72ch}
.pg--legal .legal__updated{font-family:var(--fb);font-size:.85rem;color:var(--text-3);margin:0 0 clamp(24px,3vw,36px)}
.pg--legal .legal h2{
  margin:clamp(36px,4.5vw,56px) 0 14px;color:var(--text-0);
  font-family:var(--fd);font-weight:500;font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.2;
}
.pg--legal .legal p,.pg--legal .legal li{color:var(--text-1);font-family:var(--fb);font-size:var(--fs-body);line-height:1.8}
.pg--legal .legal p{margin:0 0 1em}
.pg--legal .legal a{color:var(--accent-text);text-underline-offset:3px}

/* ---------- 404 ---------- */
.pg--error .error-page{padding-top:clamp(130px,20vh,200px);padding-bottom:clamp(56px,8vw,110px);max-width:var(--container-max);text-align:start}
.pg--error .error-page__code{
  margin:0 0 6px;color:var(--text-3);background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  font-family:var(--fd);font-weight:500;font-size:clamp(5rem,16vw,12rem);line-height:.85;letter-spacing:-.03em;
}
.pg--error .error-page h1{
  margin:0;max-width:16ch;color:var(--text-0);
  font-family:var(--fd);font-weight:500;font-size:clamp(2.2rem,5vw,4rem);line-height:1.04;letter-spacing:-.015em;
}
.pg--error .error-page > p:not(.error-page__code){margin:18px 0 0;margin-inline:0;max-width:52ch;color:var(--text-1);font-size:var(--fs-body-lg);line-height:1.7}
.pg--error .error-page__actions{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.5vw,40px)}
.pg--error .error-page__suggest{margin-top:clamp(48px,7vw,88px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--border-hairline)}
.pg--error .error-page__suggest h2{margin:0 0 18px;color:var(--text-2);font-family:var(--fb);font-weight:500;font-size:var(--fs-body);letter-spacing:.01em}
.pg--error .error-page__links{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:10px}
.pg--error .error-page__links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--r-full);
  border:1px solid var(--border-hairline-strong);color:var(--text-0);text-decoration:none;font-family:var(--fb);
  transition:border-color var(--dur-fast),color var(--dur-fast);
}
.pg--error .error-page__links a:hover{border-color:var(--accent-text);color:var(--accent-text)}

/* ---------- blog: index + articles ---------- */
.pg--blog .generated-language-toolbar{display:none}
.pg--blog .page-header .page-header__title{max-width:18ch}
.pg--article .page-header .page-header__title{font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.02;max-width:20ch}
.pg--blog [data-blog-grid].blog-grid,.pg--blog .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(16px,2vw,24px)}
.pg--article .blog-article__date,.pg--article .blog-article__readtime{font-family:var(--fb);font-size:.85rem;color:var(--text-3)}
.pg--article .blog-article__share{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--text-2);font-family:var(--fb);font-size:.85rem}
.pg--article .blog-article__share a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-hairline-strong);color:var(--text-0)}
.pg--article .blog-article__share a:hover{border-color:var(--accent-text);color:var(--accent-text)}
.pg--article .blog-article__body{max-width:70ch;border-top:1px solid var(--border-hairline);padding-top:clamp(28px,4vw,48px)}
.pg--article .blog-article__body p,.pg--article .blog-article__body li{color:var(--text-1);font-family:var(--fb);font-size:var(--fs-body-lg);line-height:1.8}
.pg--article .blog-article__body p{margin:0 0 1.15em}
.pg--article .blog-article__body h2{margin:clamp(40px,5vw,64px) 0 16px;color:var(--text-0);font-family:var(--fd);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.12}
.pg--article .blog-article__body h3{margin:clamp(26px,3vw,36px) 0 10px;color:var(--text-0);font-family:var(--fd);font-weight:500;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.25}
.pg--article .blog-article__body a{color:var(--accent-text);text-underline-offset:3px;text-decoration-thickness:1px}
.pg--article .blog-article__body ul{padding-inline-start:1.2em;margin:0 0 1.2em}
[dir=rtl] .pg--article .blog-article__body h2,[dir=rtl] .pg--article .blog-article__body h3{line-height:1.45}

/* ---------- contact form: qualification selects ---------- */
.contact-form select{
  width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-inline-end:calc(var(--sp-4) + 22px);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
[dir=rtl] .contact-form select{background-position:22px 52%,16px 52%}
.contact-form select option{color:#111;background:#fff}

/* ---------- mobile ---------- */
@media (max-width:899px){
  .pg--service .service-detail__section{grid-template-columns:1fr}
  .pg--service .service-detail__section-head{grid-row:auto;position:static;margin-bottom:22px}
  .pg--service .service-detail__section > :not(.service-detail__section-head){grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  .pg--service .service-detail__accordion-icon,
  .pg--service .service-detail__accordion-icon::before,
  .pg--service .service-detail__accordion-icon::after,
  .pg .blog-card{transition:none}
}

/* [AUDIT-2026-10-15] ivar.css dims .breadcrumbs to .75 opacity, which pulled the link colour below WCAG AA (4.0:1). The page tokens already set the intended colours. */
.pg .breadcrumbs{opacity:1}
.pg--article .blog-article__date,.pg--article .blog-article__readtime{opacity:1}