@import url('/diploma-brand-system.css');
@import url('/diploma-primary-buttons.css');
/* Shared locale control on detail and legal pages. Compact and accessible. */
.dr-locale-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;white-space:nowrap}
#dr-locale-selector{border:1px solid #DCE4DE;border-radius:3px;background:#fff;color:#363636;min-height:42px;padding:9px 27px 9px 9px;font-size:12px}
#dr-locale-selector:focus-visible{outline:3px solid rgba(33,132,91,.35);outline-offset:2px}
@media(max-width:1000px){.dr-locale-controls{margin-left:0}}

@media(max-width:400px){#dr-locale-selector{max-width:110px}}

.dr-content-language-notice{max-width:1220px;margin:0 auto;padding:10px 24px;font:400 12px/1.5 Arial,sans-serif;color:#666;background:#f7f7f5;border-bottom:1px solid #DCE4DE}

/* Detail-page header: mobile-first navigation, no controls overlapping CTAs. */
.dr-mobile-menu{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid #DCE4DE;border-radius:3px;background:#fff;color:#4a4a4a;font:500 22px/1 sans-serif;cursor:pointer}
.dr-mobile-menu:focus-visible{outline:3px solid rgba(33,132,91,.4);outline-offset:3px}
@media(max-width:1140px){
 header .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto;align-items:center;position:relative;gap:9px;padding:14px 0;min-height:70px}
 header .topbar>.brand{grid-column:1;grid-row:1;min-width:0;margin:0;font-size:clamp(12px,2.6vw,16px);letter-spacing:.055em;overflow-wrap:normal;white-space:normal}
 header .topbar>.brand small{font-size:clamp(8px,1.6vw,10px);letter-spacing:.01em}
 header .topbar>.dr-locale-controls{grid-column:2;grid-row:1;margin:0;align-self:center;min-width:0}
 header .topbar #dr-locale-selector{min-height:40px;max-width:132px;width:132px;padding:8px 24px 8px 8px;font-size:12px}
 header .topbar>.dr-mobile-menu{display:inline-flex;grid-column:3;grid-row:1}
 header .topbar>.site-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 1px);z-index:30;margin:0;padding:12px 16px 18px;background:white;border:1px solid #DCE4DE;box-shadow:0 12px 22px rgba(25,25,25,.12);max-height:min(78vh,650px);overflow-y:auto;flex-direction:column;align-items:stretch;gap:0}
 header .topbar.dr-menu-open>.site-nav{display:flex}
 header .topbar>.site-nav a{display:flex;align-items:center;min-height:46px;padding:11px 12px;color:#4a4a4a;font-size:13px;white-space:normal}
 header .topbar>.site-nav a+a{border-top:1px solid #f0efed}
 header .topbar>.site-nav .nav-cta{justify-content:center;margin-top:10px;background:var(--brand-primary, #21845B);color:#fff!important;border:1px solid var(--brand-primary, #21845B);text-align:center}
 .dr-content-language-notice{padding:12px 18px}
}
@media(max-width:430px){
 header .topbar>.brand{font-size:12px;letter-spacing:.035em}
 header .topbar>.brand small{font-size:8px;line-height:1.3}
 header .topbar #dr-locale-selector{width:105px;max-width:105px;font-size:11px}
 header .topbar{gap:7px}
 .hero h1{font-size:clamp(31px,8.2vw,39px);line-height:1.15;overflow-wrap:break-word}
 .hero{padding:38px 0 42px}
 .detail{padding-top:26px}
 .detail p,.detail li{font-size:15px;line-height:1.68}
 .detail>article section{padding:20px 0}
 .detail h2{font-size:26px}
}


/* DiplomaRecognition customer portal entry; shared on home and specialist pages.
   Keep the green commercial design, with a secondary portal action beside the
   primary services CTA, as in the CHTranslations customer journey. */
.site-header .nav-right .dr-client-portal-button{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 min-height:43px;
 min-width:108px;
 padding:9px 15px;
 background:#edf7f0;
 border:1px solid #b6d8c1;
 border-radius:7px;
 font:650 12px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;
 color:#165a42;
 text-decoration:none;
 white-space:nowrap;
 transition:background .16s ease,border-color .16s ease;
 flex:none;
}
.site-header .nav-right .dr-client-portal-button:hover{
 background:#dcefe2;
 border-color:#21845b;
 color:#165a42;
}
.site-header .nav-right .dr-client-portal-button:focus-visible,
.site-header nav .dr-client-portal-menu:focus-visible{
 outline:3px solid #21845b;
 outline-offset:3px;
}
.site-header .dr-client-portal-icon{width:17px;height:17px;flex:none;display:block}
.site-header .links .dr-client-portal-menu{display:none}
header .site-nav .dr-client-portal-menu{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:42px;
 padding:10px 14px;
 border:1px solid #b6d8c1;
 background:#edf7f0;
 color:#165a42;
 border-radius:6px;
 font-weight:650;
 text-decoration:none;
 white-space:nowrap;
}
header .site-nav .dr-client-portal-menu:hover{background:#dcefe2}

/* With the new portal button, collapse the long public navigation before it
   can collide with header controls on small laptops. */
@media(max-width:1250px){
 .site-header .nav{position:relative;gap:14px}
 .site-header .links{
  display:none;
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  right:0;
  padding:18px 20px;
  background:#fff;
  border:1px solid #dce4de;
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 25px #15251b16;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  margin:0;
  z-index:90;
 }
 .site-header .links.open{display:flex}
 .site-header .links a{font-size:13px;padding:11px 10px}
 .site-header .links .dr-client-portal-menu{
  display:flex;
  justify-content:center;
  border:1px solid #b6d8c1;
  border-radius:7px;
  background:#edf7f0;
  color:#165a42;
  font-weight:700;
  text-decoration:none;
  margin-top:7px;
 }
 .site-header .mobile-menu{display:flex;flex:none}
 .site-header .nav-right{margin-left:auto;gap:9px}
}
@media(min-width:1251px){
 .site-header .nav{gap:14px}
 .site-header .links{gap:clamp(10px,1vw,16px)}
 .site-header .nav-right{gap:8px}
}
@media(max-width:620px){
 .site-header .nav-right .dr-client-portal-button{
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  border-radius:6px;
 }
 .site-header .nav-right .dr-client-portal-label{display:none}
 .site-header .nav-right .dr-client-portal-icon{width:19px;height:19px}
 .site-header .nav-right{gap:5px}
 .site-header .links{top:calc(100% - 1px)}
}
@media print{
 .site-header .dr-client-portal-button,
 .site-header .dr-client-portal-menu{display:none!important}
}

/* Long native wordmarks (e.g. French/Italian) must wrap, not force mobile
   horizontal scrolling when the language picker, portal and menu are present. */
@media(max-width:620px){
 .site-header .nav{gap:6px;min-width:0}
 .site-header .brand{flex:1 1 auto;min-width:0;max-width:100%}
 .site-header .brandname{min-width:0;max-width:100%;white-space:normal}
 .site-header .brand-title{
  display:block;
  max-width:100%;
  white-space:normal;
  overflow-wrap:normal;
  hyphens:auto;
  line-height:1.07;
 }
 .site-header .nav-right{min-width:0;flex:0 0 auto;gap:4px}
}

/* Tablet headers also need a compact, readable portal icon: the French and
   Italian wordmarks must not push the services CTA outside the viewport. */
@media(min-width:621px) and (max-width:900px){
 .site-header .nav{gap:10px;min-width:0}
 .site-header .brand{flex:1 1 auto;min-width:0;max-width:100%}
 .site-header .brandname{min-width:0;max-width:100%;white-space:normal}
 .site-header .brand-title{display:block;white-space:normal;line-height:1.1}
 .site-header .nav-right{flex:0 0 auto;gap:6px;min-width:0}
 .site-header .nav-right .dr-client-portal-button{
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  border-radius:6px;
 }
 .site-header .nav-right .dr-client-portal-label{display:none}
 .site-header .nav-right .nav-cta{
  padding:9px 11px;
  min-height:42px;
  gap:5px;
  font-size:11px;
 }
}

/* Mid-size laptop: retain the full navigation and both commercial actions
   without clipping long labels in French, German or Italian. */
@media(min-width:1251px) and (max-width:1380px){
 .site-header .nav{gap:9px}
 .site-header .links{gap:9px}
 .site-header .links a{font-size:11px}
 .site-header .nav-right{gap:7px}
 .site-header .brandname{font-size:clamp(15px,1.4vw,18px)}
 .site-header .nav-right .dr-client-portal-button{min-width:96px;padding:8px 10px;font-size:11px;gap:6px}
 .site-header .nav-right .nav-cta{padding:8px 11px;font-size:11px;gap:6px}
}


/* Both DiplomaRecognition header actions are peers: identical dimensions,
   green backgrounds, white labels/icons, hover and focus states. The public
   site navigation remains responsive in every supported language. */
.site-header .nav-right > :is(.dr-client-portal-button,.nav-cta){
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 box-sizing:border-box;
 width:168px;
 flex:0 0 168px;
 height:44px;
 min-height:44px;
 max-height:44px;
 min-width:0;
 margin:0;
 padding:0 12px;
 border:1px solid #21845b;
 border-radius:8px;
 background:#21845b;
 color:#fff;
 font:650 12px/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;
 letter-spacing:0;
 text-align:center;
 text-decoration:none;
 white-space:nowrap;
 cursor:pointer;
 transition:background .16s ease,border-color .16s ease;
}
.site-header .nav-right > :is(.dr-client-portal-button,.nav-cta):hover{
 background:#176a49;
 border-color:#176a49;
 color:#fff;
 transform:none;
}
.site-header .nav-right > :is(.dr-client-portal-button,.nav-cta):focus-visible{
 outline:3px solid #166b4a;
 outline-offset:3px;
}
.site-header .nav-right > :is(.dr-client-portal-button,.nav-cta) :is(span,svg){
 color:inherit;
}
.site-header .nav-right > .dr-client-portal-button .dr-client-portal-icon{
 width:17px;
 height:17px;
 stroke:#fff;
}
.site-header .nav-right > .nav-cta .arrow{
 font-size:17px;
 line-height:1;
}
/* Preserve the full desktop navigation at 1280px without button mismatch. */
@media(min-width:1251px) and (max-width:1380px){
 .site-header .nav{gap:7px}
 .site-header .links{gap:6px}
 .site-header .links a{font-size:10.5px}
 .site-header .nav-right{gap:5px}
 .site-header .nav-right > :is(.dr-client-portal-button,.nav-cta){
  /* The homepage also defines 190px CTA widths with !important.
     Override them at laptop widths so the French navigation fits. */
  width:158px!important;
  min-width:158px!important;
  max-width:158px!important;
  flex:0 0 158px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 6px!important;
  font-size:10.5px!important;
  white-space:normal!important;
  gap:5px;
 }
}
@media(min-width:901px) and (max-width:1250px){
 .site-header .nav-right > :is(.dr-client-portal-button,.nav-cta){
  width:162px;
  flex-basis:162px;
 }
}
/* Tablet: when space is limited both actions use the same square icon
   treatment; labels remain available to assistive technology. */
@media(min-width:621px) and (max-width:900px){
 .site-header .nav-right > :is(.dr-client-portal-button,.nav-cta){
  width:42px;
  flex-basis:42px;
  min-width:42px;
  max-width:42px;
  height:42px;
  min-height:42px;
  max-height:42px;
  padding:0;
  gap:0;
  border-radius:7px;
 }
 .site-header .nav-right > .nav-cta > span:not(.arrow){display:none}
 .site-header .nav-right > .nav-cta .arrow{font-size:19px}
}
/* The services action already lives in the expanded mobile menu on phones.
   The portal remains one 40px green icon in the narrow header. */
@media(max-width:620px){
 .site-header .nav-right > .dr-client-portal-button{
  width:40px;
  flex-basis:40px;
  min-width:40px;
  max-width:40px;
  height:40px;
  min-height:40px;
  max-height:40px;
  padding:0;
 }
 .site-header .nav-right > .nav-cta{display:none}
}

/* Single DiplomaRecognition palette (screenshot color sampled: RGB 33/132/91).
   Full-saturation green is used for logos, green lettering and main actions.
   Pale-green surfaces remain intentional for secondary controls and notices. */
:root{--dr-brand-green:var(--brand-primary, #21845B);--dr-brand-green-light:#EDF7F0;--dr-brand-green-hover:#176A49}
.site-header .brandname .brand-title,
.site-header .brand .brand-title,
header .topbar > .brand{
 color:var(--dr-brand-green);
}
.site-header .nav-right > :is(.dr-client-portal-button,.nav-cta),
header .site-nav .nav-cta{
 background:var(--dr-brand-green);
 border-color:var(--dr-brand-green);
 color:#fff;
}
.site-header .nav-right > :is(.dr-client-portal-button,.nav-cta):hover,
header .site-nav .nav-cta:hover{
 background:var(--dr-brand-green-hover);
 border-color:var(--dr-brand-green-hover);
 color:#fff;
}
.site-header nav .dr-client-portal-menu,
header .site-nav .dr-client-portal-menu,
.site-header .links .dr-client-portal-menu{
 background:var(--dr-brand-green-light);
 border-color:#B6D8C1;
 color:var(--dr-brand-green);
}
.site-header nav .dr-client-portal-menu:hover,
header .site-nav .dr-client-portal-menu:hover{
 background:#DCEFE2;
 color:var(--dr-brand-green);
}
.site-header :is(.dr-client-portal-button,.nav-cta,.dr-client-portal-menu):focus-visible,
#dr-locale-selector:focus-visible,.dr-mobile-menu:focus-visible{
 outline:3px solid var(--dr-brand-green);
 outline-offset:2px;
}

/* The main content keeps the standard 1224px editorial grid; the public
   header may use more of a laptop display for long localized wordmarks.
   This prevents horizontal overflow without reducing either CTA or forcing
   zoom on French/Italian desktop layouts. */
@media(min-width:1150px) and (max-width:1650px){
 .site-header .shell.nav{
  width:min(calc(100% - 36px),1500px);
  max-width:1500px;
 }
}


/* Dark-grey locale selector and customer navigation, across all Diploma pages. */
#dr-locale-selector, .dr-mobile-menu, .dr-content-language-notice,
header .topbar > .site-nav a:not(.nav-cta):not(.dr-client-portal-button) {
  color: #47514d;
}
/* Preserve white type on dark/green primary navigation CTAs. */
header .topbar > .site-nav .nav-cta,
.site-header .dr-client-portal-button { color: #fff; }


/* Canonical brand lockup (shared/ui/src/brand-lockup.js + brand-lockup.css).
   The legacy page styles above target .brandname / .brand-title / .legal-wordmark /
   .brand; these rules place the new .brand-lockup anchors and neutralise the
   blanket small{color:...!important} rules so the manifest wordmark colours and
   the inverse footer stay legible. The shared stylesheet still owns type/size. */
header .topbar > .brand-lockup { grid-column:1;grid-row:1;min-width:0;margin:0; }
.site-header .brand-lockup { min-width:0; }
.footer-top .brand-lockup { min-width:0; }
@media (max-width:900px) { .site-header .brand-lockup { flex:1 1 auto;min-width:0;max-width:100%; } }
.brand-lockup.brand-lockup--diploma .brand-lockup-copy strong { color:var(--brand-lockup-name,#21845B)!important; }
.brand-lockup.brand-lockup--diploma .brand-lockup-copy small { color:var(--brand-lockup-byline,#55595C)!important; }
.brand-lockup.brand-lockup--inverse .brand-lockup-copy strong { color:#FFFFFF!important; }
.brand-lockup.brand-lockup--inverse .brand-lockup-copy small { color:#D8DEE2!important; }

/* WCAG 2.2 AA: green text on light surfaces needs 4.5:1. Diploma brand system
 * sets body .eyebrow !important, so this counter-rule keeps the same importance
 * with higher specificity and only for light-surface labels. */
body .eyebrow:not(.eyebrow-light):not(.section-label-light){color:#165a42!important}
body .step .num{color:#165a42!important}

/* This build renders the shared footer on the light ALPYREN surface, but the
 * footer lockup still inherits the inverse (white) treatment from the old dark
 * footer and disappears. Give the lockup the brand ink used in the header. */
.footer-top .brand-lockup--inverse .brand-lockup-copy strong{color:#165a42!important}
.footer-top .brand-lockup--inverse .brand-lockup-copy small{color:#55595c!important}

/* On 621–900px tablets the controls still fit alongside the wordmark,
   provided long native names can wrap instead of inheriting nowrap. */
@media(min-width:621px) and (max-width:900px){
 .site-header .nav > .brand-lockup--header .brand-lockup-copy strong{
  white-space:normal;
  overflow-wrap:break-word;
  hyphens:auto;
  line-height:1.08;
 }
 .site-header .nav > .brand-lockup--header .brand-lockup-copy small{
  white-space:normal;
  overflow-wrap:break-word;
 }
}

/* L-07: the five full localized brand names cannot share a 320-620px row
   with the language picker, portal and menu. Give the brand its own full-width
   row rather than truncating the name/byline or shrinking tap targets. */
@media(max-width:620px){
 .site-header .shell.nav{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:0;
  row-gap:8px;
  padding-block:10px;
 }
 .site-header .shell.nav > .brand-lockup--header{
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
 }
 .site-header .shell.nav > .brand-lockup--header .brand-lockup-copy{
  width:100%;
  max-width:100%;
  min-width:0;
 }
 .site-header .shell.nav > .brand-lockup--header .brand-lockup-copy strong{
  font-size:clamp(23px,6.5vw,28px);
  line-height:1.08;
  white-space:normal;
  overflow-wrap:break-word;
  hyphens:auto;
 }
 .site-header .shell.nav > .brand-lockup--header .brand-lockup-copy small{
  font-size:clamp(12px,3.6vw,14.4px);
  line-height:1.2;
  white-space:normal;
  overflow-wrap:break-word;
 }
 .site-header .shell.nav > .nav-right{
  grid-column:1;
  grid-row:2;
  justify-self:end;
  margin:0;
  min-width:0;
  gap:6px;
 }
 .site-header .shell.nav > .links{
  top:calc(100% - 1px);
 }
 html{scroll-padding-top:150px}
}

/* L-06: keep the specialist header on one row at desktop widths. */
@media(min-width:901px){
 header .topbar{flex-wrap:nowrap;min-height:83px}
 header .site-nav{flex-wrap:nowrap;gap:12px;align-items:center}
 header .site-nav .dr-client-portal-menu{padding:8px 10px;min-height:36px}
}

/* Mobile commercial hierarchy: the services CTA is the only green primary
   action; portal access stays visible as a secondary control. Desktop keeps
   its existing header and navigation appearance. */
@media (max-width: 1150px) {
  .site-header .links a[href$="#services"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 10px;
    padding: 13px 15px;
    background: var(--brand-primary, #21845B);
    border: 1px solid var(--brand-primary, #21845B);
    border-radius: 7px;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
  }
  .site-header .links a[href$="#services"]::after {
    content: "↗";
    margin-left: auto;
    color: inherit;
  }
  .site-header .links .dr-client-portal-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    margin-top: 4px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid #cfd6d2;
    border-radius: 7px;
    color: #4a4a4a;
    font-weight: 650;
    text-align: center;
  }
  .site-header .links .dr-client-portal-menu:hover {
    background: #f5f7f5;
    border-color: #aeb9b3;
    color: #244236;
  }
}
@media (max-width: 620px) {
  .site-header .nav-right .dr-client-portal-button {
    background: #fff !important;
    background-image: none !important;
    border-color: #cfd6d2 !important;
    color: #21845B !important;
    box-shadow: none !important;
  }
  .site-header .nav-right .dr-client-portal-button:hover {
    background: #f2f7f3 !important;
    background-image: none !important;
    border-color: #9fb8aa !important;
    color: #21845B !important;
  }
  .site-header .nav-right .dr-client-portal-button :is(span, strong, small, svg) {
    color: #21845B !important;
  }
}

@media (max-width: 620px) {
  body .site-header .nav-right > a.dr-client-portal-button[data-dr-client-portal][data-dr-portal-header][aria-label]:not(#dr-portal-primary) {
    background: #fff !important;
    background-image: none !important;
    border-color: #cfd6d2 !important;
    color: #21845B !important;
    box-shadow: none !important;
  }
  body .site-header .nav-right > a.dr-client-portal-button[data-dr-client-portal][data-dr-portal-header][aria-label]:not(#dr-portal-primary):hover {
    background: #f2f7f3 !important;
    background-image: none !important;
    border-color: #9fb8aa !important;
    color: #21845B !important;
  }
  body .site-header .nav-right > a.dr-client-portal-button[data-dr-client-portal][data-dr-portal-header][aria-label]:not(#dr-portal-primary) .dr-client-portal-icon {
    stroke: #21845B !important;
    color: #21845B !important;
  }
}