/* Content pages: the FAQ, the service pages, About us and the privacy statement. Builds on the tokens and header in styles.css. */
html.faq-page{color-scheme:light; scroll-padding-top:104px; --paper:#FFFFFF; --placeholder:#66758A; --ivory-dim:#C9D3E1}
.faq-page body{background:var(--ivory); color:var(--navy); --ink:var(--navy); --muted:var(--ink-soft); --accent:var(--bronze); --line:rgba(10,26,47,.16); --focus:var(--navy)}
.faq-page .seg a{display:inline-flex; align-items:center; justify-content:center; font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-radius:999px; min-height:32px; min-width:40px; padding:0 12px; transition:color var(--dur-fast) ease, background var(--dur-fast) ease}
.faq-page .seg a:hover{color:var(--navy)}
.faq-page .seg a[aria-current="page"]{background:var(--navy); color:var(--ivory)}
.faq-page .bar .btn{background:var(--navy); border-color:var(--navy); color:var(--ivory)}
.faq-page .bar .btn:hover{background:var(--navy-700); box-shadow:0 10px 28px -12px rgba(10,26,47,.55)}
.faq-page main:focus{outline:none}

.faq{padding:clamp(120px, 16vh, 168px) var(--gutter) 0}
.faq a{color:var(--navy); text-decoration-color:rgba(10,26,47,.35); text-underline-offset:3px}
.faq a:hover{text-decoration-color:currentColor}

/* Hero */
.faq-hero{max-width:1240px; margin:0 auto}
.crumbs ol{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-wrap:wrap; gap:6px 10px; font-size:var(--t-sm); color:var(--ink-soft)}
.crumbs li + li::before{content:"/"; margin-right:10px; color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}
.faq-hero h1{margin:0; max-width:17ch; font:400 italic clamp(2.3rem, 5.4vw, 4.6rem)/1.08 var(--f-serif); color:var(--navy); text-wrap:balance}
.faq-hero .lead{max-width:62ch; color:var(--ink-soft); font-size:var(--t-lg); margin-top:28px}
.faq-hero .meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin:26px 0 0; font:500 var(--t-xs)/1.4 var(--f-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}

/* Search */
.search{margin-top:40px; max-width:620px}
.search label{display:block; font-weight:500; font-size:var(--t-sm); margin-bottom:10px}
.search-box{position:relative}
.search-box .ico{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none}
.search input{width:100%; min-height:52px; padding:0 18px 0 48px; font:400 var(--t-base) var(--f-sans); color:var(--navy); background:var(--paper); border:1px solid rgba(10,26,47,.45); border-radius:999px; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease}
.search input::placeholder{color:var(--placeholder)}
.search input:hover{border-color:var(--navy)}
.search input:focus-visible{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(10,26,47,.18)}
.search .count{margin:10px 0 0; min-height:1.5em; font-size:var(--t-sm); color:var(--ink-soft)}

/* Body: sticky topic index + question list */
.faq-body{max-width:1240px; margin:56px auto 0; display:grid; grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr); gap:clamp(32px,5vw,80px); align-items:start}
.topics{position:sticky; top:112px}
.topics-h{margin:0 0 14px; font:500 var(--t-xs)/1.2 var(--f-sans); letter-spacing:.26em; text-transform:uppercase; color:var(--bronze)}
.topics ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.topics a{display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:11px 0; min-height:24px; border-bottom:1px solid var(--line); font-size:var(--t-sm); line-height:1.35; text-decoration:none; color:var(--navy); transition:color var(--dur-fast) ease, padding var(--dur) var(--ease-out)}
.topics a:hover{padding-left:6px}
.topics a.on{font-weight:600}
.topics .n{font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:var(--t-xs)}

.topic{scroll-margin-top:104px}
.topic + .topic{margin-top:clamp(56px, 8vw, 88px)}
.topic-head h2{margin:0; font:400 italic clamp(1.7rem, 2.8vw, 2.4rem)/1.15 var(--f-serif); color:var(--navy)}
.topic-head p{margin:10px 0 22px; color:var(--ink-soft); max-width:60ch}
.qas{border-top:1px solid rgba(10,26,47,.28)}

/* One question */
.qa{border-bottom:1px solid var(--line); scroll-margin-top:104px}
.qa summary{list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 4px 20px 0; min-height:44px; cursor:pointer; border-radius:4px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0; font:500 clamp(1.02rem, 1.25vw, 1.14rem)/1.45 var(--f-sans); color:var(--navy); text-wrap:pretty}
.qa summary:hover h3{text-decoration:underline; text-decoration-color:rgba(10,26,47,.35); text-underline-offset:4px}
.qa summary:focus-visible{outline:2px solid var(--navy); outline-offset:4px}
.qa .chev{margin-top:3px; width:20px; height:20px; color:var(--navy); transition:transform var(--dur) var(--ease-out)}
.qa[open] .chev{transform:rotate(180deg)}
.qa .ans{padding:0 0 26px; max-width:68ch}
.qa[open] .ans{animation:ans-in var(--dur) var(--ease-out)}
@keyframes ans-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.qa .ans p{margin:0 0 14px; line-height:1.7; color:var(--ink-soft)}
.qa .ans p.first{color:var(--navy); font-size:var(--t-lg); line-height:1.6}
.qa:target summary h3, .qa.hit summary h3{color:var(--navy)}
.rel{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line)}
.rel-h{margin:0 0 8px!important; font:500 var(--t-xs)/1.2 var(--f-sans)!important; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze)!important}
.rel ul{margin:0; padding:0; list-style:none; display:grid; gap:6px}
.rel a{font-size:var(--t-sm); line-height:1.5; display:inline-block; padding:2px 0}

.none{margin:0 0 40px; font-size:var(--t-lg); color:var(--navy)}

/* Closing call to action */
.faq-cta{margin-top:clamp(72px, 10vw, 120px); padding:clamp(28px,4vw,48px); background:var(--navy); color:var(--ivory); border-radius:18px}
.faq-cta h2{margin:0; font:400 italic clamp(1.8rem, 3vw, 2.6rem)/1.15 var(--f-serif); color:var(--ivory)}
.faq-cta > p{margin:14px 0 0; max-width:52ch; color:var(--ivory-dim); line-height:1.65}
.faq .faq-cta a{color:var(--ivory); text-decoration-color:rgba(247,244,237,.45)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.faq-cta .btn{background:var(--champ); border-color:var(--champ); color:var(--navy)}
.faq .faq-cta .btn{color:var(--navy); text-decoration:none}
.faq .faq-cta .btn:hover{background:var(--champ-hi); color:var(--navy)}
.faq .faq-cta .btn.ghost{background:transparent; border-color:rgba(247,244,237,.55); color:var(--ivory)}
.faq .faq-cta .btn.ghost:hover{background:var(--navy-700); border-color:var(--ivory); color:var(--ivory); box-shadow:none}
.faq-cta .direct{display:flex; flex-wrap:wrap; gap:6px 12px; margin:20px 0 0; font-size:var(--t-sm); color:var(--ivory-dim)}

.faq .foot-note{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 104px)} /* room for Avi under the house mark */
.faq .foot-note a{color:var(--ink-soft)}

@media (max-width: 980px){
  .faq-body{grid-template-columns:minmax(0,1fr); margin-top:40px}
  .topics{position:static}
  .topics ul{display:flex; flex-wrap:wrap; gap:8px; border-top:0}
  .topics a{border:1px solid rgba(10,26,47,.3); border-radius:999px; padding:8px 14px; min-height:36px; align-items:center}
  .topics a:hover{padding-left:14px; border-color:var(--navy)}
}
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  .faq{padding-top:112px}
  .faq-hero .lead{font-size:var(--t-base)}
  .qa .ans p.first{font-size:var(--t-base)}
}
@media (prefers-reduced-motion: reduce){
  .qa .chev, .topics a{transition:none}
}
/* Legal pages */
.legal .faq-hero h1{max-width:20ch}
.legal-body{max-width:1240px; margin:48px auto 0}
.legal-sec{max-width:68ch; padding:24px 0; border-top:1px solid var(--line)}
.legal-sec h2{margin:0 0 12px; font:400 italic clamp(1.4rem,2.2vw,1.8rem)/1.2 var(--f-serif); color:var(--navy)}
.legal-sec p{margin:0 0 12px; line-height:1.7; color:var(--ink-soft)}
.legal-sec ol,.legal-sec ul{margin:0; padding-left:1.4em; color:var(--ink-soft)}
.legal-sec li{margin:0 0 10px; line-height:1.7}
.legal-summary{background:var(--ivory-2, rgba(10,26,47,.04)); border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin:8px 0 16px}
.faq .foot-note .company{flex-basis:100%; font-size:var(--t-xs); color:var(--ink-soft)}

/* Service pages: navy hero with the 3D head and motion loop, ivory content below */
.svc-page body{background:var(--ivory)}
.svc-page:not(.on-ivory) .bar .btn{background:var(--champ); border-color:var(--champ); color:var(--navy)}
.svc-page:not(.on-ivory) .bar .btn:hover{background:var(--champ-hi)}
.svc-page:not(.on-ivory) .seg a{color:var(--slate)}
.svc-page:not(.on-ivory) .seg a:hover{color:var(--ivory)}
.svc-page:not(.on-ivory) .seg a[aria-current="page"]{background:var(--champ); color:var(--navy)}
.svc{padding:0}
.svc-hero{background:var(--navy-950); color:var(--ivory); padding:clamp(112px,15vh,150px) var(--gutter) clamp(56px,8vh,96px); --ink:var(--ivory); --muted:var(--slate); --accent:var(--champ); --focus:var(--champ-hi)}
.svc-hero-in{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); align-items:center}
.svc-hero .crumbs ol{color:var(--slate)}
.svc-hero .crumbs a, .svc-hero .crumbs li + li::before{color:var(--slate)}
.svc-bot{position:relative; width:clamp(120px,12vw,170px); margin:0 0 14px -10px}
.svc-bot .bot-slot{display:block; width:100%}
.svc-bot .bot-slot img{width:100%; height:100%; transition:opacity var(--dur) ease}
.svc-hero .eyebrow{color:var(--champ)}
.svc-hero h1{margin:0; font:400 italic clamp(2.1rem,4.6vw,3.9rem)/1.1 var(--f-serif); color:var(--ivory); text-wrap:balance; max-width:18ch}
.svc-hero .lead{color:#C9D3E1; max-width:58ch; font-size:var(--t-lg); margin-top:22px}
.svc-hero .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.svc-hero .btn{text-decoration:none}
.faq .svc-hero a.btn{color:var(--navy)}
.faq .svc-hero a.btn.ghost{background:transparent; border-color:rgba(247,244,237,.55); color:var(--ivory)}
.faq .svc-hero a.btn.ghost:hover{background:var(--navy-700); border-color:var(--ivory); color:var(--ivory); box-shadow:none}
.svc-media{margin:0; border-radius:22px; overflow:hidden; border:1px solid rgba(216,182,128,.25); box-shadow:0 30px 80px -30px rgba(0,0,0,.7); background:var(--navy)}
.svc-media video{display:block; width:100%; height:auto; aspect-ratio:1}
.svc-body{max-width:1240px; margin:0 auto; padding:clamp(56px,8vw,96px) var(--gutter) 0}
.svc-sec + .svc-sec{margin-top:clamp(56px,8vw,88px)}
.svc-sec h2{margin:0 0 24px; font:400 italic clamp(1.7rem,2.8vw,2.4rem)/1.15 var(--f-serif); color:var(--navy)}
.svc-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,56px); border-top:1px solid var(--line)}
.svc-grid li{padding:24px 0; border-bottom:1px solid var(--line)}
.svc-grid h3, .svc-steps h3, .svc-steps h4{margin:0 0 8px; font:500 var(--t-lg)/1.35 var(--f-sans); color:var(--navy)}
.svc-grid p, .svc-steps p{margin:0; color:var(--ink-soft); line-height:1.65}
.svc-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.5vw,32px); counter-reset:step}
.svc-steps li{counter-increment:step; padding-top:18px; border-top:1px solid rgba(10,26,47,.3)}
.svc-steps li::before{content:counter(step, decimal-leading-zero); display:block; margin-bottom:10px; font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.22em; color:var(--bronze)}
.svc-know{margin:0; padding:0 0 0 1.2em; max-width:70ch; color:var(--ink-soft); line-height:1.7}
.svc-know li + li{margin-top:10px}
.svc-allfaq{margin:18px 0 0}
.svc-others{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.svc-other{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px 16px; border-radius:16px; background:var(--navy); text-decoration:none; text-align:center; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) ease}
.faq .svc-other{color:var(--champ-hi)}
.svc-other .bot-slot{width:min(96px,100%)}
.svc-other span{font:500 11px/1.3 var(--f-sans); letter-spacing:.12em; text-transform:uppercase}
.svc-other:hover{transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(10,26,47,.6)}
.svc .faq-cta{margin-top:clamp(64px,9vw,104px)}
.svc .foot-note{margin-inline:max(var(--gutter), calc((100% - 1240px) / 2))} /* centred like the content above, with the gutter on narrow screens */
@media (max-width: 980px){
  .svc-hero-in{grid-template-columns:minmax(0,1fr)}
  .svc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-others{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc-hero .lead{font-size:var(--t-base)}
}
@media (max-width: 420px){ .svc-steps{grid-template-columns:minmax(0,1fr)} .svc-others{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Plain-language section on the service pages (shown by the switch; see styles.css) */
.svc-plain .plain-h{margin:clamp(36px,5vw,56px) 0 18px; font:500 var(--t-xs)/1.2 var(--f-sans); letter-spacing:.24em; text-transform:uppercase; color:var(--bronze)}
.svc-plain .plain-last{margin-top:clamp(36px,5vw,56px)}
.plain-example{margin-top:clamp(36px,5vw,56px); padding:clamp(22px,3vw,32px); border-radius:20px; background:var(--navy); color:var(--ivory)}
.plain-example h3{margin:0 0 10px; font:500 var(--t-xs)/1.2 var(--f-sans); letter-spacing:.24em; text-transform:uppercase; color:var(--champ-hi)}
.plain-example p{margin:0; max-width:72ch; font:400 italic clamp(1.05rem,1.4vw,1.2rem)/1.65 var(--f-serif); color:var(--ivory)}
.plain-note{margin-top:clamp(28px,4vw,40px); padding:20px 22px; border-left:3px solid var(--bronze); background:#FFFDF8; border-radius:0 16px 16px 0}
.plain-note h3{margin:0 0 8px; font:500 var(--t-lg)/1.35 var(--f-sans); color:var(--navy)}
.plain-note p{margin:0; max-width:75ch; color:var(--ink-soft); line-height:1.65}
.plain-can{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.plain-can li{position:relative; padding:18px 20px 18px 50px; border-radius:16px; background:#FFFDF8; border:1px solid var(--line); color:var(--navy); line-height:1.6}
.plain-can li::before{content:""; position:absolute; left:20px; top:25px; width:14px; height:8px; border-left:2px solid var(--bronze); border-bottom:2px solid var(--bronze); transform:rotate(-45deg)}
.plain-start{margin:clamp(32px,4vw,48px) 0 0; max-width:62ch; font:400 italic clamp(1.15rem,1.6vw,1.35rem)/1.5 var(--f-serif); color:var(--navy)}
@media (max-width: 720px){ .plain-can{grid-template-columns:minmax(0,1fr)} }

/* About us (over-ons.html, about-us.html) */
.about .about-film{margin:0; align-self:center}
.about-who-in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.about-who-p{margin:0 0 22px; max-width:60ch; font-size:var(--t-lg); line-height:1.65}
.about-facts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:0 0 18px}
.about-facts > div{padding:14px 16px; border-radius:14px; border:1px solid var(--line)}
.about-facts dt{margin-bottom:6px; font:500 var(--t-xs)/1.2 var(--f-sans); letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.about-facts dd{margin:0; line-height:1.45}
.about-who .direct{display:flex; flex-wrap:wrap; gap:8px 12px; margin:0}
@media (max-width: 900px){ .about-who-in{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 420px){ .about-facts{grid-template-columns:minmax(0,1fr)} }
/* Page not found (404.html) */
.nf-actions{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0}
.nf-en{margin:24px 0 0; color:var(--muted)}
.nf-en a{color:inherit}
.nf-actions .btn:not(.ghost){background:var(--navy); border-color:var(--navy); color:var(--ivory)}
.nf-actions .btn:not(.ghost):hover{background:var(--navy-700)}
.nf-actions .btn.ghost{border-color:var(--navy); color:var(--navy)}
.nf-actions .btn.ghost:hover{background:rgba(10,26,47,.06)}