/* ══════════════════════════════════════════════════════════════════════════
   ELITE DIVISION INTRODUCTION PAGES
   One shared architecture for the division landing experiences, inheriting the
   Elite tokens, navigation and typography from styles.css. Each division gets
   its own character through composition, rhythm, type scale and image
   treatment — never through a different palette. Built so a division can grow
   into a full site later without changing its URL or its shell.
   ══════════════════════════════════════════════════════════════════════════ */
.division-site{background:var(--white-sec);color:var(--text);overflow-x:hidden}
.division-site #nav{height:88px}
.division-site #nav.scrolled{height:74px}

/* The nav sits transparent over the hero and resolves to solid on scroll,
   matching the treatment already used across the divisions. */
.division-site #nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
.division-site #nav:not(.scrolled){background-color:transparent;border-bottom-color:transparent;box-shadow:none}
.division-site #nav .nav-links a,
.division-site #nav .lang-btn,
.division-site #nav .lang-sep,
.division-site #nav .mobile-lang-btn,
.division-site #nav .mobile-lang-sep{color:rgba(255,255,255,.84)}
.division-site #nav .lang-btn.active,
.division-site #nav .mobile-lang-btn.active{color:#fff}
.division-site #nav .nav-cta{background:transparent;border:1px solid rgba(255,255,255,.62);color:#fff}
.division-site #nav .nav-cta:hover{background:rgba(255,255,255,.12)}
.division-site #nav .hamburger-btn span{background:#fff}
.division-site #nav.scrolled{background:rgba(255,255,255,.96);border-bottom-color:rgba(0,0,0,.07);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 1px 24px rgba(0,0,0,.06);color:#111}
.division-site #nav.scrolled .nav-links a,
.division-site #nav.scrolled .lang-btn,
.division-site #nav.scrolled .lang-sep,
.division-site #nav.scrolled .mobile-lang-btn,
.division-site #nav.scrolled .mobile-lang-sep{color:#3e3838}
.division-site #nav.scrolled .lang-btn.active,
.division-site #nav.scrolled .mobile-lang-btn.active{color:#111}
.division-site #nav.scrolled .nav-cta{background:#111;border-color:#111;color:#fff}
.division-site #nav.scrolled .nav-cta:hover{background:#292525}
.division-site #nav.scrolled .hamburger-btn span{background:#111}
.division-nav-logo{position:relative;width:142px;height:72px;flex:0 0 142px}
.division-site .division-nav-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease}
.division-nav-logo__light{opacity:1}
.division-nav-logo__dark{opacity:0}
.division-site #nav.scrolled .division-nav-logo__light{opacity:0}
.division-site #nav.scrolled .division-nav-logo__dark{opacity:1}

.division-shell{width:min(1280px,calc(100% - 144px));margin:0 auto}

/* ── Hero ────────────────────────────────────────────────────────────────
   Same spacing principle as the other Elite heroes: the fixed nav is reserved
   inside the hero's own padding, content is centred in the remainder, and the
   lower band is larger than the upper lift so the message seats in the
   upper-middle rather than the base of the frame. */
.division-hero{
  --dv-hero-nav:88px;
  --dv-hero-lift:clamp(22px,3.6vh,48px);
  --dv-hero-band:clamp(150px,22vh,238px);
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--dv-hero-nav) + var(--dv-hero-lift));
  padding-bottom:var(--dv-hero-band);
  overflow:hidden;background:#0a0a0a;color:#fff;
}
.division-hero__image{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;transform:scale(1.03)}
.division-hero__scrim{position:absolute;inset:0}
.division-hero__content{position:relative;z-index:2}
.division-mark{
  display:grid;grid-template-columns:32px minmax(0,1fr);
  grid-template-areas:"line label" "line division";
  column-gap:14px;row-gap:7px;align-items:start;margin-bottom:26px;max-width:min(100%,620px);
}
.division-mark__line{grid-area:line;width:32px;height:1px;margin-top:.68em;background:var(--orange)}
.division-mark__label{grid-area:label;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:1.45;white-space:nowrap}
.division-mark__division{grid-area:division;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);line-height:1.45}
/* The category descriptor (e.g. "Property & Facility Management") sits between
   the division mark and the headline — a second, plainer register that names
   the scope before the headline sets the tone. */
.division-kicker{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);margin:0 0 22px;max-width:46ch;line-height:1.4}
.division-hero h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.98;
  font-size:clamp(52px,5.6vw,86px);max-width:25ch;text-wrap:balance;
}
.division-hero h1 em{color:var(--orange);font-style:italic}
.division-hero__lead{
  max-width:56ch;margin:28px 0 36px;font-size:17px;line-height:1.75;font-weight:300;
  color:rgba(255,255,255,.72);
}
.division-hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.division-hero__foot{
  position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);
  width:min(1280px,calc(100% - 144px));display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:14px;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4);
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.division-section{padding:118px 0;background:var(--white-sec)}
.division-section--tint{background:var(--light-sec)}
.division-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-text);margin-bottom:18px}
.division-title{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.2vw,62px);line-height:1.05;letter-spacing:-.015em;max-width:18ch;text-wrap:balance}
.division-title em{color:var(--orange);font-style:italic}
.division-copy{font-size:17px;line-height:1.9;font-weight:300;color:var(--text-mid);max-width:62ch}
.division-copy + .division-copy{margin-top:20px}
.division-intro{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}

/* ── Focus areas ──────────────────────────────────────────────────────────
   An editorial list of numbered rows rather than a card grid — the service
   scope reads as a structured index, not a wall of repeated boxes. */
.focus-head{max-width:760px;margin-bottom:52px}
.division-focus-grid{border-top:1px solid var(--line-l)}
.division-focus-item{
  display:grid;grid-template-columns:64px minmax(0,300px) minmax(0,1fr);
  gap:32px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line-l);
}
.division-focus-item__num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.04em;color:var(--orange-text);align-self:baseline}
.division-focus-item h3{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.2}
.division-focus-item p{font-size:14px;line-height:1.75;color:var(--text-mid);font-weight:300}

/* ── Certification strip (Audit & Conseil only) ───────────────────────────
   A compact, factual presentation of the three named standards — not another
   full section, just a quieter sub-block beneath the service list. */
.division-cert-strip{margin-top:52px;padding-top:38px;border-top:1px solid var(--line-l)}
.division-cert-head{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mid);margin-bottom:24px}
.division-cert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.division-cert-item__num{font-family:var(--serif);font-size:21px;color:var(--text);letter-spacing:-.01em}
.division-cert-item h4{margin-top:6px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--text-mid);text-transform:none}
.division-cert-note{margin-top:26px;font-size:12.5px;line-height:1.75;color:var(--text-mid);font-style:italic;max-width:64ch}

/* ── Consultation ─────────────────────────────────────────────────────── */
.division-consult{padding:122px 0;background:#0a0a0a;color:#fff}
.division-consult__grid{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start}
.division-consult .division-title{color:#fff;max-width:16ch}
.division-consult .division-eyebrow{color:var(--orange)}
.division-consult__copy{font-size:16px;line-height:1.85;font-weight:300;color:rgba(255,255,255,.6);max-width:52ch;margin-top:22px}
.division-consult__note{margin-top:26px;padding-left:18px;border-left:2px solid var(--orange);font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.5);font-weight:300}
.consult-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.consult-form label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);grid-column:auto}
.consult-form label.full{grid-column:1/-1}
.consult-form input,.consult-form select,.consult-form textarea{
  width:100%;margin-top:9px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);
  padding:12px 0;color:#fff;font:inherit;font-size:14px;letter-spacing:0;text-transform:none;
  border-radius:0;transition:border-color .25s ease;
}
.consult-form select{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:26px}
.consult-form select option{background:#141414;color:#fff}
.consult-form input:focus,.consult-form select:focus,.consult-form textarea:focus{outline:none;border-bottom-color:var(--orange)}
.consult-form input:focus-visible,.consult-form select:focus-visible,.consult-form textarea:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.consult-form textarea{resize:vertical;min-height:96px}
.consult-form .form-submit{grid-column:1/-1;margin-top:12px;display:inline-flex;align-items:center;gap:10px;justify-self:start}
.consult-form .form-status{grid-column:1/-1;font-size:13px;line-height:1.7;color:var(--orange);margin-top:4px}

/* ── Footer ───────────────────────────────────────────────────────────── */
.division-footer{background:#050505;color:#fff;padding:88px 0 26px}
.division-footer__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:64px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
.division-footer__brand img{height:70px;width:auto;display:block;margin-bottom:22px}
.division-footer__brand p{font-size:14px;line-height:1.85;font-weight:300;color:rgba(255,255,255,.42);max-width:38ch}
.division-footer__coltitle{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:20px}
.division-footer__links{display:flex;flex-direction:column;gap:12px}
.division-footer__links a{font-size:14px;font-weight:300;color:rgba(255,255,255,.5);transition:color .2s ease;padding:3px 0}
.division-footer__links a:hover{color:var(--orange)}
.division-footer__bottom{display:flex;justify-content:space-between;gap:18px;padding-top:24px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3)}

/* ══════════════════════════════════════════════════════════════════════════
   DIVISION PERSONALITIES
   One palette, four compositions. Differentiation comes from image treatment,
   type scale, rhythm and architectural detail.
   ══════════════════════════════════════════════════════════════════════════ */

/* Immobilier — architectural and spatial: wide frame, strong horizontal rules,
   the image held further right so the built form reads as structure. */
.division--immobilier .division-hero__image{background-image:url('../assets/images/division-immobilier.jpg');background-position:68% center;filter:saturate(.7) contrast(1.06) brightness(.6)}
.division--immobilier .division-hero__scrim{background:linear-gradient(90deg,rgba(6,7,9,.95) 0%,rgba(6,7,9,.7) 48%,rgba(6,7,9,.28) 100%),linear-gradient(180deg,rgba(6,7,9,.28),rgba(6,7,9,.86))}
.division--immobilier .division-focus-grid{border-top-width:2px;border-top-color:var(--text)}

/* Incubator — forward-looking: lighter, airier, the focus areas read as a
   sequence rather than a grid. */
.division--incubator .division-hero__image{background-image:url('../assets/images/division-incubator.jpg');background-position:58% center;filter:saturate(.72) contrast(1.04) brightness(.58)}
.division--incubator .division-hero__scrim{background:linear-gradient(90deg,rgba(8,10,14,.94) 0%,rgba(8,10,14,.64) 55%,rgba(8,10,14,.3) 100%),linear-gradient(180deg,rgba(8,10,14,.2),rgba(8,10,14,.88))}
.division--incubator .division-hero h1{font-size:clamp(50px,5.2vw,78px)}
.division--incubator .division-focus-item{padding:34px 0}
.division--incubator .division-section{padding:126px 0}

/* VIP — discreet and private: the most restraint of the four. Smaller type,
   more air, a narrower measure, nothing raised in volume. */
.division--vip .division-hero__image{background-image:url('../assets/images/division-vip.jpg');background-position:52% center;filter:saturate(.55) contrast(1.02) brightness(.5)}
.division--vip .division-hero__scrim{background:linear-gradient(90deg,rgba(4,5,7,.96) 0%,rgba(4,5,7,.8) 46%,rgba(4,5,7,.42) 100%),linear-gradient(180deg,rgba(4,5,7,.34),rgba(4,5,7,.9))}
.division--vip .division-hero h1{font-size:clamp(46px,4.6vw,68px)}
.division--vip .division-hero__lead{max-width:48ch;font-size:16px}
.division--vip .division-title{font-size:clamp(34px,3.5vw,50px)}
.division--vip .division-copy{max-width:54ch;font-size:16px}
.division--vip .division-section{padding:134px 0}
.division--vip .division-focus-grid{border-top-color:rgba(0,0,0,.1)}
.division--vip .division-focus-item{padding:38px 0}
.division--vip .division-focus-item h3{font-size:21px}
.division--vip .division-focus-item__num{opacity:.7}
.division--vip .division-intro{gap:110px}

/* Audit & Conseil — precise and structured: tighter rhythm, rule-heavy,
   the focus areas set as an ordered index. */
.division--audit .division-hero__image{background-image:url('../assets/images/division-audit-conseil.jpg');background-position:62% center;filter:saturate(.62) contrast(1.08) brightness(.55)}
.division--audit .division-hero__scrim{background:linear-gradient(90deg,rgba(7,8,10,.95) 0%,rgba(7,8,10,.74) 44%,rgba(7,8,10,.3) 100%),linear-gradient(180deg,rgba(7,8,10,.26),rgba(7,8,10,.88))}
.division--audit .division-hero h1{font-size:clamp(48px,5vw,74px)}
.division--audit .division-section{padding:104px 0}
.division--audit .division-focus-grid{border-top:1px solid var(--text)}
.division--audit .division-focus-item{padding:24px 0}
.division--audit .division-focus-item h3{font-size:22px}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — designed for each size, not stacked from desktop
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1200px){
  .division-shell,.division-hero__foot{width:min(100% - 96px,1120px)}
  .division-intro{gap:64px}
  .division-consult__grid{gap:60px}
}
@media (max-width:1000px){
  .division-shell,.division-hero__foot{width:calc(100% - 64px)}
  .division-hero{--dv-hero-band:clamp(120px,18vh,180px)}
  .division-intro,.division-consult__grid{grid-template-columns:1fr;gap:44px}
  .division-focus-item{grid-template-columns:52px minmax(0,1fr);gap:6px 22px;padding:26px 0}
  .division-focus-item p{grid-column:2}
  .division-cert-grid{gap:22px}
  .division-footer__top{grid-template-columns:1fr 1fr;gap:44px}
  .division-section,.division--vip .division-section,.division--incubator .division-section,.division--audit .division-section{padding:88px 0}
  .division-consult{padding:92px 0}
}
/* Tablet ceiling: the header already switches to the hamburger up to 1023px,
   so the hero stops enforcing a full 100svh screen for the same range — these
   are the simplest intro pages on the site and were previously carrying the
   tallest cinematic hero at tablet widths, leaving 300–500px of dead space. */
@media (max-width:1023px){
  .division-hero{min-height:auto;--dv-hero-lift:clamp(20px,3vh,40px);--dv-hero-band:clamp(90px,13vh,150px)}
}
@media (max-width:700px){
  .division-site #nav{height:58px;padding:0 20px}
  .division-site #nav.scrolled{height:50px}
  .division-nav-logo{width:92px;height:52px;flex-basis:92px}
  .division-shell,.division-hero__foot{width:calc(100% - 40px)}
  /* Full-bleed on phones too, matching the desktop hero: the background
     image carries the extra height, and lift-smaller-than-band keeps the
     message in the upper-middle rather than dead-center. */
  .division-hero{
    --dv-hero-nav:58px;
    --dv-hero-lift:clamp(18px,3vh,30px);
    --dv-hero-band:clamp(56px,9vh,96px);
    min-height:100svh;
  }
  .division-mark{grid-template-columns:30px minmax(0,1fr);column-gap:12px;row-gap:6px;margin-bottom:18px;max-width:100%}
  .division-mark__line{width:30px}
  .division-mark__label{font-size:10px;letter-spacing:.14em;white-space:normal}
  .division-mark__division{font-size:9.5px;letter-spacing:.14em}
  .division-hero h1,
  .division--incubator .division-hero h1,
  .division--vip .division-hero h1,
  .division--audit .division-hero h1{font-size:clamp(40px,11vw,52px);max-width:100%;line-height:1}
  .division-kicker{font-size:11.5px;letter-spacing:.08em;margin-bottom:16px;max-width:100%}
  .division-hero__lead,.division--vip .division-hero__lead{font-size:14.5px;line-height:1.72;margin:22px 0 28px;max-width:100%}
  .division-hero__actions{flex-direction:column;align-items:stretch;gap:10px}
  .division-hero__actions .btn-primary,.division-hero__actions .btn-outline{justify-content:center;min-height:52px;padding:14px 18px;font-size:11px;letter-spacing:.14em}
  /* Both labels wrap on a phone, and a space-between row lets them collide.
     Stacking keeps the information and removes the overlap. */
  .division-hero__foot{bottom:16px;font-size:9px;letter-spacing:.1em;padding-top:12px;
    flex-direction:column;align-items:flex-start;gap:5px}
  .division-hero__foot span:last-child{text-align:left}
  .division-section,.division--vip .division-section,.division--incubator .division-section,.division--audit .division-section{padding:66px 0}
  .division-consult{padding:70px 0}
  .division-eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:14px}
  .division-title,.division--vip .division-title{font-size:clamp(32px,9vw,40px);max-width:100%}
  .division-copy,.division--vip .division-copy{font-size:15px;line-height:1.8;max-width:100%}
  .focus-head{margin-bottom:32px}
  .division-focus-item{grid-template-columns:1fr;gap:0;padding:24px 0}
  .division-focus-item__num{display:block;margin-bottom:10px}
  .division-focus-item h3,.division--vip .division-focus-item h3,.division--audit .division-focus-item h3{font-size:21px}
  .division-focus-item p{grid-column:auto;margin-top:10px;font-size:14px;line-height:1.72}
  .division-cert-strip{margin-top:38px;padding-top:30px}
  .division-cert-grid{grid-template-columns:1fr;gap:20px}
  .consult-form{grid-template-columns:1fr;gap:18px}
  .consult-form label.full{grid-column:auto}
  /* 16px prevents iOS Safari zooming on focus; 50px keeps a comfortable target */
  .consult-form input,.consult-form select,.consult-form textarea{font-size:16px;min-height:50px;padding:13px 0}
  .consult-form textarea{min-height:120px}
  .consult-form .form-submit{width:100%;justify-content:center;min-height:52px}
  .division-consult__copy{font-size:15px}
  .division-footer{padding:64px 0 22px}
  .division-footer__top{grid-template-columns:1fr;gap:36px;padding-bottom:36px}
  .division-footer__brand img{height:58px}
  .division-footer__bottom{flex-direction:column;gap:8px;font-size:9px;letter-spacing:.14em}
}
@media (max-width:390px){
  .division-shell,.division-hero__foot{width:calc(100% - 32px)}
  .division-hero h1,
  .division--incubator .division-hero h1,
  .division--vip .division-hero h1,
  .division--audit .division-hero h1{font-size:38px}
}
/* A short laptop keeps the hero controls inside the first screen. */
@media (min-width:1024px) and (max-height:820px){
  .division-hero{--dv-hero-nav:76px;--dv-hero-lift:clamp(16px,2.6vh,30px);--dv-hero-band:clamp(112px,16vh,158px)}
  .division-hero h1{font-size:clamp(46px,4.4vw,64px)}
  .division-hero__lead{margin:22px 0 26px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .division-site .reveal,.division-site .reveal.in{opacity:1!important;transform:none!important;transition:none!important}
}