/* The light opening, cobalt title and service panel follow the Devis Group homepage. */
main:has(.home-opening) { --display:system-ui,-apple-system,"Segoe UI",sans-serif; }
.home-opening {
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(2.4rem,4.6vw,4.4rem) 0 clamp(1.75rem,3.5vw,3rem);
  background:radial-gradient(ellipse at 95% 18%,#2251ff0d 0,transparent 37%),#f4f6fa;
}
.home-opening::before,.home-opening::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
.home-opening::before { background:radial-gradient(circle at 1px 1px,#7484b11b .7px,transparent .9px) left top/20px 20px; }
.home-opening::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M-80 79C220 -15 528 137 815 68S1233 99 1510 6' fill='none' stroke='%232251ff' stroke-opacity='.12' stroke-width='2.5'/%3E%3Cpath d='M-80 99C260 1 514 152 845 87S1258 117 1510 27' fill='none' stroke='%23071033' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E") center 29%/100% 8.5rem no-repeat;
}
.home-cover,.home-service { width:min(76rem,calc(100% - 4rem)); margin-inline:auto; }
.home-cover { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr); align-items:center; gap:clamp(2rem,4.7vw,4rem); }
.home-copy { min-width:0; }
.home-edition,.picker-tag {
  display:inline-flex; align-items:center; gap:.45rem; width:fit-content;
  border:1px solid #2251ff33; border-radius:99px; background:#e8edff; color:#102050; font:650 .85rem/1.3 var(--body); padding:.46rem .9rem;
}
.home-edition svg { color:#2251ff; flex:none; }
.home-cover h1 { margin:clamp(1.2rem,2.15vw,1.95rem) 0 1rem; color:#071033; font:700 clamp(2.25rem,4.2vw,3.15rem)/1.14 var(--display); letter-spacing:-.045em; }
.home-cover h1 em { display:block; margin-top:.15rem; color:#2251ff; font-style:normal; }
.home-intro { max-width:60ch; font:400 1.125rem/1.64 var(--body); color:#4b5563; }
.home-cover .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin:1.65rem 0 .85rem; }
.home-cover .button { min-height:54px; padding:.75rem 1.45rem; font:600 1rem/1.35 var(--body); }
.home-cover .button-primary { color:white; background:linear-gradient(110deg,#071033,#0a1a4d); box-shadow:0 4px 10px #0710331c; }
.home-cover .button-primary:hover { background:#13275c; }
.home-cover .button-primary span { display:grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:50%; background:#ffffff27; font-size:.93rem; }
.home-cover .button-secondary { color:#071033; background:#fff; border:2px solid #07103326; }
.home-cover .button-secondary:hover { border-color:#8396c9; background:#f9faff; }
.home-supplement { font-size:.88rem; line-height:1.6; color:#4b5563; }
.home-supplement a { font-weight:640; }
.home-amount { margin:.35rem 0 .5rem; color:#37435c; font-size:.88rem; line-height:1.55; }
.home-amount strong { color:#071033; }
.home-amount a { color:#193db8; text-underline-offset:.16em; }
.home-picker {
  display:grid; grid-template-columns:3.25rem minmax(0,1fr); overflow:hidden; min-width:0;
  background:#f4f6fa; border:1px solid #0b1d4814; border-radius:1.7rem; box-shadow:0 24px 60px -22px #07103348;
}
.picker-rail { display:flex; flex-direction:column; align-items:center; background:linear-gradient(180deg,#071033,#0a1a4d); padding:1.45rem 0; gap:1.2rem; }
.picker-rail img { width:2.1rem; height:auto; }
.picker-rail span { color:#d3defa; writing-mode:vertical-rl; font:570 .68rem/1.1 var(--body); letter-spacing:.055em; }
.picker-body { min-width:0; padding:clamp(1rem,1.6vw,1.4rem); }
.picker-heading { display:flex; align-items:center; gap:.65rem; justify-content:space-between; font-size:.86rem; font-weight:660; color:#071033; }
.picker-tag { font-size:.69rem; padding:.28rem .65rem; color:#1d42b8; }
.home-picker h2 { margin:1.15rem 0 .3rem; font:700 clamp(1.55rem,2.25vw,1.95rem)/1.12 var(--display); letter-spacing:-.035em; color:#071033; }
.picker-intro { color:#536075; font-size:.86rem; line-height:1.5; }
.home-picker .picker-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:.9rem 0 .6rem; }
.home-picker .picker-links a {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.65rem .25rem; align-items:center; min-width:0; min-height:75px;
  padding:.75rem .8rem; border-radius:.92rem; color:#071033; background:white; border:1px solid #dce2ee;
  text-decoration:none; font-size:.86rem;
}
.country-mark { grid-column:1/-1; display:grid; place-items:center; width:2rem; height:1.55rem; font:700 .67rem/1 var(--body); border-radius:.48rem; color:#1d42b8; background:#edf1ff; }
.home-picker .picker-links i { margin:0; font-style:normal; color:#2251ff; }
.picker-calc { display:flex; align-items:center; gap:.72rem; padding:.78rem .85rem; min-height:54px; border:1px solid #dce2ee; border-radius:.92rem; color:#071033; background:white; text-decoration:none; }
.picker-calc strong,.picker-calc small { display:block; }
.picker-calc strong { font:650 .9rem/1.38 var(--body); }
.picker-calc small { font-size:.74rem; color:#536075; }
.calc-glyph { flex:none; display:grid; place-items:center; color:#2251ff; background:#edf1ff; width:2.2rem; height:2.2rem; border-radius:.7rem; }
.picker-calc > span:last-child { margin-left:auto; color:#2251ff; }
.home-picker .picker-links a:hover,.picker-calc:hover { border-color:#93a9ea; background:#f9faff; }
.home-service { display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(1.85rem,3.3vw,3.15rem); padding:clamp(1.2rem,2.1vw,1.85rem) clamp(1.2rem,2.7vw,2.5rem); background:white; border:1px solid #e0e5ef; border-radius:1.3rem; box-shadow:0 10px 32px #0710330d; }
.service-entry { display:flex; align-items:flex-start; gap:.85rem; }
.service-entry:first-child { padding-right:clamp(1rem,3vw,2.8rem); }
.service-entry + .service-entry { border-left:1px solid #dfe4ed; padding-left:clamp(1rem,3vw,2.8rem); }
.service-icon { flex:none; display:grid; place-items:center; border-radius:.85rem; width:2.85rem; height:2.85rem; color:#2251ff; background:#eef1ff; }
.home-service p { font:450 .91rem/1.55 var(--body); color:#4b5563; }
.home-service strong { display:block; font:680 1.17rem/1.24 var(--display); color:#071033; margin:.1rem 0 .3rem; }
@media (max-width:900px) {
 .home-cover { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:1.4rem; }
 .home-picker { grid-template-columns:2.5rem minmax(0,1fr); }
}
@media (max-width:760px) {
 .home-opening { padding:1.15rem 0 1.65rem; }
 .home-cover,.home-service { width:min(40rem,calc(100% - 2rem)); }
 .home-cover { display:block; }
 .home-cover h1 { margin:1.12rem 0 .85rem; font-size:clamp(1.65rem,5.6vw + .4rem,3.12rem); line-height:1.15; }
 .home-intro { font-size:1.055rem; line-height:1.55; }
 .home-cover .hero-actions { display:grid; grid-template-columns:minmax(0,1fr); margin:1.3rem 0 .65rem; gap:.65rem; }
 .home-supplement { font-size:.85rem; }
 .home-picker { margin-top:1.35rem; border-radius:1.15rem; box-shadow:0 8px 24px #07103312; grid-template-columns:minmax(0,1fr); background:white; }
 .picker-rail { display:none; }
 .picker-body { padding:1.05rem; }
 .home-picker h2 { margin:.65rem 0 .2rem; font-size:1.55rem; }
 .home-picker .picker-links a { display:flex; align-items:center; min-height:48px; padding:.5rem .6rem; gap:.4rem; background:#f7f9fc; }
 .home-picker .picker-links i { margin-left:auto; }
 .home-picker .picker-calc { min-height:49px; padding:.55rem .65rem; background:#f7f9fc; }
 .home-service { grid-template-columns:minmax(0,1fr); margin-top:.85rem; padding:1.05rem; }
 .service-entry { gap:.7rem; }
 .service-entry:first-child { padding:0 0 .9rem; }
 .service-entry + .service-entry { border:0; border-top:1px solid #dfe4ed; padding:.9rem 0 0; }
 .service-icon { width:2.3rem; height:2.3rem; border-radius:.68rem; }
}
@media (max-width:420px) {
 .home-picker .picker-links i { display:none; }
 .home-picker .picker-links strong { white-space:nowrap; }
 .home-picker .country-mark { flex:none; width:1.55rem; }
}
@media (max-width:355px) {
 .home-picker .picker-links a { padding:.45rem; }
 .home-picker .picker-links i { display:none; }
}
@media (forced-colors:active) { .home-opening::before,.home-opening::after { display:none; } .home-picker a,.devis-nav-cta { border:1px solid LinkText; } }

/* Homepage guide and service panels follow the public Devis service catalogue. */
.home-directory, .retro-window, .home-faq, .family-reading, .process-grid {
  width: min(72rem, calc(100% - clamp(2rem, 6vw, 5rem)));
}
.home-eyeline {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: .5rem;
  color: #1e42bd;
  background: #eff3ff;
  border: 1px solid #d5dfff;
  padding: .32rem .8rem;
  border-radius: 999px;
  font: 650 .78rem/1.45 var(--body);
  text-transform: none;
  letter-spacing: 0;
}
.home-eyeline::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #2251ff;
}
.directory-intro, .home-faq > div:first-child {
  max-width: 45rem;
  margin-inline: auto;
  text-align: center;
}
.directory-intro .section-title, .retro-copy .section-title,
.process-intro .section-title, .home-faq .section-title {
  margin: .85rem 0 .55rem;
  color: #071033;
  font-size: clamp(2.05rem, 3.6vw, 3.25rem);
  line-height: 1.04;
}
.directory-intro .section-lead, .home-faq .section-lead { margin-inline: auto; }
.directory-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  padding: 0;
  margin: clamp(1.5rem, 3.4vw, 2.8rem) 0 0;
  list-style: none;
}
.directory-route {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.2rem, 2vw, 1.9rem);
  border: 1px solid #d2dcf3;
  border-radius: 1rem;
  color: var(--navy);
  background: white;
  box-shadow: 0 8px 28px rgb(7 16 51 / .06);
  text-decoration: none;
}
.directory-head { display: flex; gap: .65rem; align-items: center; }
.directory-mark, .calendar-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  color: #2046c6;
  background: #eef2ff;
  border-radius: .75rem;
  font: 700 .87rem/1 var(--body);
}
.route-label { color: #405172; font: 630 .78rem/1.35 var(--body); }
.directory-route h3 { margin: 1.05rem 0 .45rem; font-size: clamp(1.4rem, 1.9vw, 1.72rem); }
.directory-route p { flex: 1; color: #485571; font-size: .94rem; line-height: 1.56; }
.directory-action {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 1.25rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg,#071033,#0a1a4d);
  font: 650 .87rem/1.4 var(--body);
}
.directory-route:hover, .directory-route:focus-visible { border-color: #8098ef; box-shadow: 0 12px 40px rgb(7 16 51 / .1); }
.directory-route:hover .directory-action { background: #173582; }
.retro-window { align-items: center; gap: clamp(1.5rem, 5vw, 4.35rem); }
.retro-copy .retro-guide { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.retro-calendar {
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid #d5deed;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 8px 28px rgb(7 16 51 / .06);
}
.retro-calendar figcaption {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dce3ee;
  color: #49566d;
}
.retro-calendar figcaption strong { color: var(--navy); font-size: clamp(1.7rem, 2.7vw, 2.3rem); }
.retro-calendar .retro-months li { border-color: #d7e1f1; background: #f5f7fc; color: #253d75; }
.retro-calendar .retro-current { background: #eff3ff; border-inline-start: 3px solid #2251ff; border-radius: 0 .45rem .45rem 0; }
.retro-calendar .retro-note { color: #4a5870; }
.family-process { background: #f4f6fa; border-color: #e2e7ef; }
.process-grid { column-gap: clamp(2rem, 6vw, 5rem); }
.process-steps li { padding-left: 3rem; }
.process-steps li::before { background: #fff; color: #2251ff; border-color: #bdcbf4; font-weight: 700; }
.process-steps h3 { font-size: 1.45rem; }
.home-faq {
  display: block;
  max-width: 53rem;
}
.home-faq .faq-items {
  display: grid;
  gap: .65rem;
  margin-top: clamp(1.4rem, 3vw, 2.5rem);
  border: 0;
}
.home-faq .faq-items details {
  padding-inline: clamp(.9rem, 2.6vw, 1.4rem);
  border: 1px solid #dae2ed;
  border-radius: .85rem;
  background: white;
}
.home-faq .faq-items details[open] { border-color: #a6b7ee; }
.home-faq .faq-items summary { min-height: 3.55rem; }
.home-faq .faq-items summary:hover { color: #1a3bac; }
.home-faq .faq-items details[open] summary::after { background: #2251ff; color: white; }
.family-reading .reading-band {
  background: linear-gradient(116deg,#071033,#102258);
  border-radius: 1.25rem;
  grid-template-columns: minmax(0,1fr) minmax(0,.74fr);
  gap: clamp(1.4rem, 5vw, 4.5rem);
}
.reading-band .home-eyeline { border-color: #536792; color: #e1e8ff; background: #1b305f; }
.reading-band .home-eyeline::before { background: #9db1ff; }
.reading-copy .button { margin-top: 1rem; }
.home-reading-links { width: 100%; list-style: none; padding: 0; margin: 0; }
.home-reading-links li { border-top: 1px solid #536488; }
.home-reading-links li:last-child { border-bottom: 1px solid #536488; }
.home-reading-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.9rem;
  padding-block: .65rem;
  text-decoration: none;
  color: #f4f6ff;
  font-weight: 620;
  line-height: 1.45;
}
.home-reading-links small { display: block; margin-bottom: .18rem; color: #becfff; font-size: .75rem; font-weight: 550; }
.home-reading-links a:hover { text-decoration: underline; }
@media (max-width: 730px) {
  .directory-list, .family-reading .reading-band { grid-template-columns: minmax(0,1fr); }
  .directory-list { gap: .8rem; }
  .directory-route { padding: 1.1rem; }
  .directory-route h3 { margin-top: .85rem; }
  .directory-action { margin-top: .9rem; }
  .retro-window, .family-reading { margin-bottom: 2.5rem; }
  .home-directory, .home-faq { padding-block: 2.65rem; }
}
@media (forced-colors: active) {
  .home-eyeline, .directory-mark, .calendar-icon, .directory-action { border: 1px solid CanvasText; }
  .directory-action, .home-reading-links a { color: LinkText; }
}