:root{
  --cw-navy:#0A2540;
  --cw-blue:#173D5E;
  --cw-gold:#D4AF37;
  --cw-light-gold:#F1D678;
  --cw-paper:#F7F5EF;
  --cw-ink:#102B43;
  --cw-muted:#687986;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
}

body.brochure-page{
  overflow-x:hidden;

  background:
    linear-gradient(
      180deg,
      #eef1f3 0%,
      #f7f8f9 52%,
      #edf0f2 100%
    );

  color:var(--cw-ink);
}


/* =========================================
   HEADER
   ========================================= */

.brochure-header{
  min-height:92px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:2rem;

  padding:.65rem 4vw;

  background:
    linear-gradient(
      180deg,
      #224c70 0%,
      #173a5b 55%,
      #0A2540 100%
    );

  border-bottom:3px solid var(--cw-gold);
}

.brochure-brand{
  display:flex;
  align-items:center;

  margin:0;
  padding:0;
}

.brochure-brand img{
  display:block;

  width:245px;
  max-height:70px;

  object-fit:contain;
}

.brochure-nav{
  display:flex;
  align-items:center;

  gap:1rem;
}

.brochure-nav a{
  color:#fff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:.9rem;
  font-weight:700;

  text-decoration:none;

  white-space:nowrap;
}

.brochure-nav a:hover{
  color:var(--cw-light-gold);
}

.brochure-header-cta{
  padding:.65rem .9rem;

  border-radius:7px;

  background:var(--cw-gold);

  color:var(--cw-navy) !important;
}


/* =========================================
   INTRO
   ========================================= */

.brochure-main{
  width:100%;
}

.brochure-intro{
  width:min(1180px,92vw);

  margin:0 auto;

  padding:3.4rem 0 2rem;

  text-align:center;
}

.brochure-eyebrow{
  margin:0 0 .65rem;

  color:#b78f13;

  font-size:.76rem;
  font-weight:800;

  letter-spacing:.18em;
}

.brochure-intro h1{
  margin:.1rem 0 .8rem;

  color:var(--cw-navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(
    2.6rem,
    5vw,
    4.5rem
  );

  line-height:1.02;
}

.brochure-intro > p:not(.brochure-eyebrow){
  max-width:760px;

  margin:.5rem auto 0;

  color:var(--cw-muted);

  font-size:1.03rem;
  line-height:1.65;
}

.brochure-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:.7rem;

  margin-top:1.5rem;
}

.brochure-primary-action,
.brochure-secondary-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:48px;

  margin:0;
  padding:.7rem 1rem;

  border-radius:7px;

  font-weight:800;

  text-decoration:none;
}

.brochure-primary-action{
  border:1px solid var(--cw-gold);

  background:var(--cw-gold);

  color:var(--cw-navy);
}

.brochure-secondary-action{
  border:1px solid #ccd4da;

  background:#fff;

  color:var(--cw-navy);
}


/* =========================================
   BOOK SHELL
   ========================================= */

.flipbook-shell{
  width:min(1320px,96vw);

  margin:1rem auto 4rem;

  padding:1rem;

  border:1px solid rgba(10,37,64,.12);
  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #0A2540,
      #123d60
    );

  box-shadow:
    0 30px 70px rgba(10,37,64,.22);
}

.flipbook-toolbar{
  min-height:58px;

  display:grid;
  grid-template-columns:
    minmax(120px,1fr)
    auto
    minmax(120px,1fr);

  align-items:center;

  gap:1rem;

  padding:.2rem .2rem 1rem;
}

.flipbook-control,
.flipbook-footer-button{
  margin:0;

  border:1px solid rgba(212,175,55,.55);

  background:rgba(255,255,255,.06);

  color:#fff;

  font-weight:700;

  box-shadow:none;
}

#brochurePrev{
  justify-self:start;
}

#brochureNext{
  justify-self:end;
}

.flipbook-control:hover,
.flipbook-footer-button:hover{
  border-color:var(--cw-gold);

  background:rgba(212,175,55,.14);
}

.flipbook-page-status{
  min-width:150px;

  text-align:center;

  color:#fff;

  font-size:.88rem;
  font-weight:700;
}

.flipbook-stage{
  position:relative;

  min-height:620px;

  display:grid;
  place-items:center;

  overflow:hidden;

  border-radius:15px;

  background:
    radial-gradient(
      circle at center,
      #e9e5dc 0%,
      #d8d2c7 58%,
      #bdb6aa 100%
    );

  box-shadow:
    inset 0 0 50px rgba(0,0,0,.15);
}


/* =========================================
   LOADING
   ========================================= */

.flipbook-loading{
  position:absolute;
  z-index:10;

  inset:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:.55rem;

  color:var(--cw-navy);

  text-align:center;
}

.flipbook-loading[hidden]{
  display:none;
}

.flipbook-loading strong{
  margin-top:.5rem;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.25rem;
}

.flipbook-loading span{
  color:#6c7479;

  font-size:.82rem;
}

.flipbook-spinner{
  width:42px;
  height:42px;

  border:4px solid rgba(10,37,64,.14);
  border-top-color:var(--cw-gold);
  border-radius:50%;

  animation:
    brochure-spin .8s linear infinite;
}

@keyframes brochure-spin{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================
   ACTUAL BOOK
   ========================================= */

.brochure-book{
  margin:auto;
}

.brochure-page-sheet{
  position:relative;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 2px 10px rgba(0,0,0,.12);
}

.brochure-page-sheet canvas{
  display:block;

  width:100%;
  height:100%;

  background:#fff;
}

.brochure-page-sheet.--left{
  border-radius:4px 0 0 4px;
}

.brochure-page-sheet.--right{
  border-radius:0 4px 4px 0;
}


/* =========================================
   BOOK FOOTER
   ========================================= */

.flipbook-footer-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:1rem;

  padding:1rem .2rem .15rem;
}

.flipbook-footer-button{
  flex:0 0 auto;
}

.flipbook-hint{
  color:rgba(255,255,255,.67);

  font-size:.75rem;

  text-align:right;
}


/* =========================================
   BOTTOM CTA
   ========================================= */

.brochure-bottom-cta{
  width:min(1180px,92vw);

  margin:0 auto 4rem;

  padding:2.5rem;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:2rem;

  border-radius:20px;

  background:#fff;

  border:1px solid #dde3e7;

  box-shadow:
    0 18px 45px rgba(10,37,64,.08);
}

.brochure-bottom-cta > div:first-child{
  max-width:690px;
}

.brochure-bottom-cta h2{
  margin:.1rem 0 .6rem;

  color:var(--cw-navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(
    2rem,
    3vw,
    3rem
  );
}

.brochure-bottom-cta p{
  color:var(--cw-muted);

  line-height:1.65;
}

.brochure-bottom-actions{
  display:flex;
  flex-direction:column;

  gap:.6rem;

  flex:0 0 auto;
}

.brochure-secondary-action.dark{
  border-color:var(--cw-navy);
}


/* =========================================
   FULLSCREEN
   ========================================= */

.flipbook-shell:fullscreen{
  width:100%;
  height:100%;

  margin:0;

  padding:1rem;

  border:0;
  border-radius:0;

  background:#071d31;
}

.flipbook-shell:fullscreen .flipbook-stage{
  min-height:
    calc(100vh - 145px);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media(max-width:900px){

  .brochure-header{
    min-height:76px;

    padding:.55rem 1rem;
  }

  .brochure-brand img{
    width:190px;
  }

  .brochure-nav > a:not(.brochure-header-cta){
    display:none;
  }

  .brochure-intro{
    padding-top:2.4rem;
  }

  .flipbook-shell{
    width:98vw;

    padding:.65rem;

    border-radius:15px;
  }

  .flipbook-stage{
    min-height:580px;
  }

  .brochure-bottom-cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .brochure-bottom-actions{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
  }
}

@media(max-width:640px){

  .brochure-header{
    min-height:68px;
  }

  .brochure-brand img{
    width:150px;
  }

  .brochure-header-cta{
    padding:.5rem .6rem;

    font-size:.7rem !important;
  }

  .brochure-intro{
    padding:1.8rem 0 1.25rem;
  }

  .brochure-intro h1{
    font-size:2.5rem;
  }

  .brochure-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .flipbook-toolbar{
    grid-template-columns:1fr auto 1fr;

    gap:.35rem;
  }

  .flipbook-control{
    padding:.55rem .5rem;

    font-size:.72rem;
  }

  .flipbook-page-status{
    min-width:90px;

    font-size:.72rem;
  }

  .flipbook-stage{
    min-height:500px;
  }

  .flipbook-footer-controls{
    flex-direction:column;
    align-items:stretch;
  }

  .flipbook-hint{
    text-align:center;
  }

  .brochure-bottom-cta{
    width:calc(100% - 2rem);

    margin-bottom:2rem;

    padding:1.5rem;
  }

  .brochure-bottom-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}

/* =========================================
   CHESTER WINDOWS FLIPBOOK COVER
   ========================================= */

.chester-brochure-cover{
  position:relative;
  overflow:hidden;

  background:#0A2540;

  color:#fff;
}

.chester-cover-background{
  position:absolute;
  inset:0;
  z-index:0;
}

.chester-cover-image{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transform:scale(1.02);
}

.chester-cover-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(10,37,64,.92) 0%,
      rgba(10,37,64,.70) 34%,
      rgba(10,37,64,.36) 60%,
      rgba(6,27,46,.94) 100%
    ),
    linear-gradient(
      90deg,
      rgba(10,37,64,.55),
      rgba(10,37,64,.08)
    );
}

.chester-cover-content{
  position:relative;
  z-index:2;

  height:100%;

  display:flex;
  flex-direction:column;

  padding:7% 8% 8%;
}

.chester-cover-brand{
  display:flex;
  align-items:center;
}

.chester-cover-brand img{
  display:block;

  width:70%;
  max-width:330px;
  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(
      0 4px 8px rgba(0,0,0,.24)
    );
}

.chester-cover-rule{
  width:100%;
  height:2px;

  margin:5% 0 0;

  background:
    linear-gradient(
      90deg,
      #D4AF37,
      rgba(212,175,55,.15)
    );
}

.chester-cover-title{
  margin-top:auto;
  margin-bottom:auto;
}

.chester-cover-title > span{
  display:block;

  margin-bottom:3%;

  color:#E3BF4B;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:clamp(
    10px,
    1.4vw,
    17px
  );

  font-weight:800;

  letter-spacing:.2em;
}

.chester-cover-title h2{
  margin:0;

  color:#fff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(
    34px,
    5vw,
    64px
  );

  font-weight:600;

  line-height:.98;

  letter-spacing:-.02em;

  text-shadow:
    0 3px 18px rgba(0,0,0,.28);
}

.chester-cover-title p{
  max-width:90%;

  margin:5% 0 0;

  color:rgba(255,255,255,.88);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(
    12px,
    1.7vw,
    20px
  );

  line-height:1.45;
}

.chester-cover-footer{
  padding-top:5%;

  border-top:
    1px solid rgba(212,175,55,.65);
}

.chester-cover-footer strong,
.chester-cover-footer span{
  display:block;
}

.chester-cover-footer strong{
  color:#D4AF37;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:clamp(
    10px,
    1.25vw,
    15px
  );

  letter-spacing:.18em;
}

.chester-cover-footer span{
  margin-top:1.5%;

  color:rgba(255,255,255,.72);

  font-size:clamp(
    9px,
    1.15vw,
    14px
  );
}

/*
  Cover should behave like a hard brochure cover.
*/
.chester-brochure-cover[data-density="hard"]{
  box-shadow:
    inset -7px 0 12px rgba(0,0,0,.18),
    0 3px 14px rgba(0,0,0,.18);
}

@media(max-width:640px){

  .chester-cover-content{
    padding:8% 9%;
  }

  .chester-cover-brand img{
    width:76%;
  }

  .chester-cover-title p{
    max-width:100%;
  }

}

/* =========================================
   COVER REFINEMENT
   ========================================= */

.chester-cover-brand img{
  width:62%;
  max-width:285px;
}

.chester-cover-rule{
  margin-top:4%;
}

.chester-cover-title{
  transform:translateY(-4%);
}

.chester-cover-title > span{
  margin-bottom:2.5%;
}

.chester-cover-title h2{
  line-height:.92;
}

.chester-cover-title p{
  max-width:94%;
  margin-top:4%;

  font-size:clamp(
    11px,
    1.55vw,
    18px
  );

  line-height:1.5;
}

.chester-cover-footer{
  padding-top:4%;
}

.chester-cover-footer strong{
  font-size:clamp(
    9px,
    1.15vw,
    14px
  );
}

.chester-cover-footer span{
  margin-top:1%;
}

@media(max-width:640px){

  .chester-cover-brand img{
    width:68%;
  }

  .chester-cover-title{
    transform:translateY(-2%);
  }

  .chester-cover-title h2{
    line-height:.94;
  }

}

/* =========================================
   COVER SPACING AFTER EYEBROW REMOVAL
   ========================================= */

.chester-cover-title{
  transform:translateY(-12%);
}

.chester-cover-title h2{
  margin-top:0;
}

.chester-cover-title p{
  margin-top:3.5%;
}

@media(max-width:640px){
  .chester-cover-title{
    transform:translateY(-8%);
  }
}


/* 2026-10-05 NAVY STUDIO BROCHURE VIEWER
   ---------------------------------------------------------
   Bring the brochure experience into the same presentation
   family as Composite Door Designer V2.

   Priorities:
   - brochure is the primary content
   - complete cover visible on initial desktop viewport
   - restrained navy / gold treatment
   - white premium workspace
   - modern sans-serif hierarchy
   - compact controls
   --------------------------------------------------------- */

:root {
  --cw-navy: #11263a;
  --cw-navy-deep: #0b1824;
  --cw-blue: #173d5e;
  --cw-gold: #b08a4a;
  --cw-light-gold: #cfb98e;
  --cw-paper: #ffffff;
  --cw-ink: #1c2731;
  --cw-muted: #6d7781;
  --cw-border: #d8dde1;
  --cw-soft: #eef1f3;
  --cw-studio-shadow:
    0 18px 50px rgba(17, 38, 58, .11);
}

html {
  background: #e9edf0;
}

body.brochure-page {
  min-height: 100svh;
  margin: 0;

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  color: var(--cw-ink);

  background:
    linear-gradient(
      180deg,
      #f8fafb 0%,
      #edf1f4 100%
    );
}

/* ---------------------------------------------------------
   STUDIO TOP BAR
   --------------------------------------------------------- */

.brochure-header {
  position: relative;
  z-index: 20;

  width: 100%;
  height: 74px;
  min-height: 74px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 8px 24px;

  background: #ffffff;

  border: 0;
  border-bottom:
    1px solid var(--cw-border);

  box-shadow:
    0 3px 14px rgba(17, 38, 58, .045);
}

.brochure-brand {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;
}

.brochure-brand img {
  display: block;

  width: 185px;
  max-width: 30vw;
  max-height: 54px;

  object-fit: contain;
}

.brochure-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 6px;
}

.brochure-nav a {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 9px 13px;

  border: 1px solid transparent;
  border-radius: 7px;

  background: transparent;

  color: var(--cw-navy);

  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;

  text-decoration: none;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.brochure-nav a:hover,
.brochure-nav a:focus {
  border-color: var(--cw-border);

  background: #f7f9fb;

  color: var(--cw-navy);
}

.brochure-nav a:focus-visible {
  outline: 2px solid var(--cw-navy);
  outline-offset: 3px;
}

.brochure-nav .brochure-header-cta {
  border-color: var(--cw-navy);

  background: var(--cw-navy);

  color: #ffffff !important;
}

.brochure-nav .brochure-header-cta:hover,
.brochure-nav .brochure-header-cta:focus {
  border-color: var(--cw-navy-deep);

  background: var(--cw-navy-deep);

  color: #ffffff !important;
}

/* ---------------------------------------------------------
   COMPACT BROCHURE IDENTITY / ACTION STRIP
   --------------------------------------------------------- */

.brochure-main {
  width: 100%;
  min-height: calc(100svh - 74px);
}

.brochure-intro {
  width:
    min(
      1240px,
      calc(100% - 32px)
    );

  min-height: 100px;

  margin: 0 auto;
  padding: 12px 0 10px;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "eyebrow actions"
    "title actions"
    "copy actions";

  column-gap: 28px;
  row-gap: 2px;

  align-items: center;

  text-align: left;
}

.brochure-eyebrow {
  grid-area: eyebrow;

  margin: 0 0 2px;

  color: var(--cw-muted);

  font-family: inherit;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.25;

  letter-spacing: .14em;
  text-transform: uppercase;
}

.brochure-intro h1 {
  grid-area: title;

  margin: 0;

  color: var(--cw-navy);

  font-family: inherit;
  font-size:
    clamp(
      1.35rem,
      2vw,
      1.65rem
    );

  font-weight: 600;
  line-height: 1.15;

  letter-spacing: -.025em;
}

.brochure-intro > p:not(.brochure-eyebrow) {
  grid-area: copy;

  max-width: 680px;

  margin: 4px 0 0;

  color: var(--cw-muted);

  font-size: .82rem;
  line-height: 1.4;
}

.brochure-actions {
  grid-area: actions;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

  margin: 0;
}

.brochure-primary-action,
.brochure-secondary-action {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 9px 13px;

  border-radius: 7px;

  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;

  text-decoration: none;

  box-shadow: none;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.brochure-primary-action {
  border:
    1px solid var(--cw-navy);

  background: var(--cw-navy);

  color: #ffffff;
}

.brochure-primary-action:hover,
.brochure-primary-action:focus {
  border-color: var(--cw-navy-deep);

  background: var(--cw-navy-deep);

  color: #ffffff;
}

.brochure-secondary-action {
  border:
    1px solid var(--cw-border);

  background: #ffffff;

  color: var(--cw-navy);
}

.brochure-secondary-action:hover,
.brochure-secondary-action:focus {
  border-color: #9eacb9;

  background: #f7f9fb;

  color: var(--cw-navy);
}

/* ---------------------------------------------------------
   PRIMARY BROCHURE STUDIO
   --------------------------------------------------------- */

.flipbook-shell {
  position: relative;

  width:
    min(
      1240px,
      calc(100% - 32px)
    );

  /*
   * Header + identity strip + margins are deducted so the
   * whole viewer fits inside the first desktop viewport.
   */
  height:
    clamp(
      440px,
      calc(100svh - 198px),
      820px
    );

  min-height: 0;

  margin: 6px auto 14px;
  padding: 10px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid var(--cw-border);

  border-radius: 12px;

  background: #ffffff;

  box-shadow: var(--cw-studio-shadow);
}

.flipbook-toolbar {
  flex: 0 0 42px;

  min-height: 42px;

  display: grid;
  grid-template-columns:
    minmax(100px, 1fr)
    auto
    minmax(100px, 1fr);

  align-items: center;

  gap: 8px;

  margin: 0;
  padding: 0 0 8px;
}

.flipbook-control,
.flipbook-footer-button {
  min-height: 34px;

  margin: 0;
  padding: 7px 12px;

  border:
    1px solid var(--cw-border);

  border-radius: 7px;

  background: #ffffff;

  color: var(--cw-navy);

  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.15;

  box-shadow: none;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.flipbook-control:hover:not(:disabled),
.flipbook-footer-button:hover:not(:disabled) {
  border-color: var(--cw-gold);

  background: #faf8f3;

  color: var(--cw-navy);
}

.flipbook-control:focus-visible,
.flipbook-footer-button:focus-visible {
  outline: 2px solid var(--cw-navy);
  outline-offset: 2px;
}

.flipbook-control:disabled {
  opacity: .42;

  cursor: not-allowed;
}

#brochurePrev {
  justify-self: start;
}

#brochureNext {
  justify-self: end;
}

.flipbook-page-status {
  min-width: 120px;

  color: var(--cw-navy);

  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;

  text-align: center;
}

.flipbook-stage {
  position: relative;

  flex: 1 1 auto;

  width: 100%;
  height: auto;
  min-height: 0;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid #e1e6eb;

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      #f7f9fb 0%,
      #eef1f3 100%
    );

  box-shadow:
    inset 0 0 32px
      rgba(17, 38, 58, .035);
}

.brochure-book {
  margin: auto;
}

.brochure-page-sheet {
  background: #ffffff;

  box-shadow:
    0 4px 18px
      rgba(17, 38, 58, .14);
}

.flipbook-loading {
  color: var(--cw-navy);
}

.flipbook-loading strong {
  margin-top: 8px;

  color: var(--cw-navy);

  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
}

.flipbook-loading span {
  color: var(--cw-muted);

  font-family: inherit;
  font-size: .76rem;
}

.flipbook-spinner {
  width: 34px;
  height: 34px;

  border:
    3px solid
      rgba(17, 38, 58, .12);

  border-top-color: var(--cw-gold);
}

/* ---------------------------------------------------------
   COMPACT VIEWER FOOTER
   --------------------------------------------------------- */

.flipbook-footer-controls {
  flex: 0 0 36px;

  min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin: 0;
  padding: 7px 0 0;
}

.flipbook-footer-button {
  flex: 0 0 auto;

  border-color: var(--cw-navy);

  background: var(--cw-navy);

  color: #ffffff;
}

.flipbook-footer-button:hover {
  border-color: var(--cw-navy-deep);

  background: var(--cw-navy-deep);

  color: #ffffff;
}

.flipbook-hint {
  color: var(--cw-muted);

  font-family: inherit;
  font-size: .68rem;
  line-height: 1.3;

  text-align: right;
}

/* ---------------------------------------------------------
   FULLSCREEN STUDIO
   --------------------------------------------------------- */

.flipbook-shell:fullscreen {
  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  margin: 0;
  padding: 12px;

  display: flex;
  flex-direction: column;

  border: 0;
  border-radius: 0;

  background: #e9edf0;
}

.flipbook-shell:fullscreen
  .flipbook-stage {
  flex: 1 1 auto;

  height: auto;
  min-height: 0;

  border-color: #d8dde1;

  background:
    linear-gradient(
      145deg,
      #f7f9fb 0%,
      #eef1f3 100%
    );
}

/* ---------------------------------------------------------
   SECONDARY CTA BELOW THE FOLD
   --------------------------------------------------------- */

.brochure-bottom-cta {
  width:
    min(
      1180px,
      calc(100% - 32px)
    );

  margin: 24px auto 40px;
  padding: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  border:
    1px solid var(--cw-border);

  border-radius: 10px;

  background: #ffffff;

  box-shadow:
    0 8px 24px
      rgba(17, 38, 58, .055);
}

.brochure-bottom-cta h2 {
  margin: 2px 0 6px;

  color: var(--cw-navy);

  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;

  letter-spacing: -.02em;
}

.brochure-bottom-cta p {
  margin: 0;

  color: var(--cw-muted);

  font-size: .84rem;
  line-height: 1.5;
}

.brochure-bottom-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  gap: 6px;

  flex: 0 0 auto;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .brochure-header {
    height: 68px;
    min-height: 68px;

    padding: 7px 16px;
  }

  .brochure-brand img {
    width: 165px;
    max-height: 48px;
  }

  .brochure-intro {
    width:
      calc(100% - 24px);

    min-height: 116px;

    grid-template-columns: 1fr;

    grid-template-areas:
      "eyebrow"
      "title"
      "copy"
      "actions";

    gap: 3px;

    padding:
      10px 0 8px;
  }

  .brochure-actions {
    justify-content: flex-start;

    margin-top: 5px;
  }

  .flipbook-shell {
    width:
      calc(100% - 20px);

    height:
      clamp(
        420px,
        calc(100svh - 210px),
        760px
      );

    margin-top: 4px;

    padding: 8px;

    border-radius: 10px;
  }

  .flipbook-stage {
    min-height: 0;
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {
  .brochure-header {
    height: 62px;
    min-height: 62px;

    gap: 10px;

    padding: 6px 10px;
  }

  .brochure-brand img {
    width: 132px;
    max-width: 42vw;
    max-height: 44px;
  }

  .brochure-header-cta {
    min-height: 36px !important;

    padding:
      7px 9px !important;

    font-size:
      .66rem !important;
  }

  .brochure-intro {
    min-height: 128px;

    padding:
      9px 0 7px;
  }

  .brochure-intro h1 {
    font-size: 1.2rem;
  }

  .brochure-intro
    > p:not(.brochure-eyebrow) {
    display: none;
  }

  .brochure-actions {
    display: flex;
    flex-wrap: nowrap;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 2px;

    scrollbar-width: none;
  }

  .brochure-actions::-webkit-scrollbar {
    display: none;
  }

  .brochure-primary-action,
  .brochure-secondary-action {
    min-height: 36px;

    flex: 0 0 auto;

    padding: 7px 10px;

    font-size: .69rem;
  }

  .flipbook-shell {
    width:
      calc(100% - 12px);

    height:
      clamp(
        390px,
        calc(100svh - 214px),
        700px
      );

    margin-top: 2px;
    margin-bottom: 8px;

    padding: 6px;

    border-radius: 8px;
  }

  .flipbook-toolbar {
    flex-basis: 38px;
    min-height: 38px;

    grid-template-columns:
      1fr
      auto
      1fr;

    gap: 4px;

    padding-bottom: 5px;
  }

  .flipbook-control {
    min-height: 32px;

    padding: 6px 7px;

    font-size: .68rem;
  }

  .flipbook-page-status {
    min-width: 86px;

    font-size: .67rem;
  }

  .flipbook-footer-controls {
    flex: 0 0 34px;
    min-height: 34px;

    flex-direction: row;
    align-items: center;

    padding-top: 5px;
  }

  .flipbook-footer-button {
    min-height: 30px;

    padding: 5px 8px;

    font-size: .67rem;
  }

  .flipbook-hint {
    display: none;
  }

  .brochure-bottom-cta {
    width:
      calc(100% - 20px);

    margin:
      16px auto 24px;

    padding: 18px;

    flex-direction: column;
    align-items: flex-start;
  }

  .brochure-bottom-actions {
    width: 100%;
  }
}

/* 2026-10-05 BROCHURE BRAND PRESENCE AND BACKDROP
   ---------------------------------------------------------
   Approved Chester Windows brand lockup plus a deliberately
   softened door/home backdrop. The image is atmosphere only:
   brochure content remains the visual priority.
   --------------------------------------------------------- */

body.brochure-page {
  position: relative;
  isolation: isolate;

  background: transparent;
}

body.brochure-page::before {
  content: "";

  position: fixed;
  z-index: -2;

  inset: -18px;

  pointer-events: none;

  background:
    url("assets/product-doors.webp")
    center 46% / cover
    no-repeat;

  opacity: .15;

  filter:
    blur(5px)
    saturate(.72)
    contrast(.92);

  transform: scale(1.025);
}

body.brochure-page::after {
  content: "";

  position: fixed;
  z-index: -1;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(247, 249, 251, .91) 0%,
      rgba(239, 243, 246, .93) 48%,
      rgba(234, 239, 243, .95) 100%
    );
}

/*
 * Pico/global main rules were still contributing vertical
 * whitespace. The brochure studio owns its own spacing.
 */
.brochure-main {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------
   STRONGER APPROVED BRAND LOCKUP
   --------------------------------------------------------- */

.brochure-header {
  height: 88px;
  min-height: 88px;

  padding:
    6px
    clamp(18px, 3vw, 42px);

  background:
    rgba(255, 255, 255, .965);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.brochure-brand {
  width: 300px;
  max-width: 40vw;

  flex: 0 0 auto;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 0;
}

.brochure-brand img {
  width: 286px;
  max-width: 100%;
  max-height: 61px;

  object-fit: contain;
  object-position: center;

  filter:
    drop-shadow(
      0 2px 3px rgba(17, 38, 58, .06)
    );
}

.brochure-brand-tagline {
  width: max-content;
  max-width: 100%;

  margin-top: -4px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  color: #65737f;

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: .17em;
  text-transform: uppercase;

  white-space: nowrap;
}

.brochure-brand-tagline b {
  color: var(--cw-gold);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0;
}

/* ---------------------------------------------------------
   RECOVER FIRST-SCREEN SPACE
   --------------------------------------------------------- */

.brochure-intro {
  min-height: 82px;

  padding:
    8px 0 7px;
}

.flipbook-shell {
  height:
    clamp(
      400px,
      calc(100svh - 184px),
      790px
    );

  margin-top: 3px;
}

/*
 * Keep the viewer readable against the atmospheric image,
 * while allowing a trace of the page background through.
 */
.flipbook-shell,
.brochure-bottom-cta {
  background:
    rgba(255, 255, 255, .965);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.flipbook-stage {
  background:
    linear-gradient(
      145deg,
      rgba(249, 251, 252, .97) 0%,
      rgba(238, 242, 245, .97) 100%
    );
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .brochure-header {
    height: 78px;
    min-height: 78px;
  }

  .brochure-brand {
    width: 225px;
    max-width: 38vw;
  }

  .brochure-brand img {
    width: 218px;
    max-height: 53px;
  }

  .brochure-brand-tagline {
    font-size: 7px;
    letter-spacing: .13em;
    gap: 5px;
  }

  .brochure-intro {
    min-height: 104px;
  }

  .flipbook-shell {
    height:
      clamp(
        390px,
        calc(100svh - 190px),
        730px
      );
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {
  .brochure-header {
    height: 68px;
    min-height: 68px;

    padding:
      5px 9px;
  }

  .brochure-brand {
    width: 155px;
    max-width: 46vw;

    align-items: flex-start;
  }

  .brochure-brand img {
    width: 152px;
    max-height: 43px;

    object-position: left center;
  }

  .brochure-brand-tagline {
    margin-top: -2px;

    justify-content: flex-start;

    gap: 4px;

    font-size: 5.2px;
    letter-spacing: .1em;
  }

  .brochure-brand-tagline b {
    font-size: 5px;
  }

  .brochure-intro {
    min-height: 116px;
  }

  .flipbook-shell {
    height:
      clamp(
        370px,
        calc(100svh - 192px),
        680px
      );
  }

  body.brochure-page::before {
    opacity: .1;
  }
}

/* 2026-10-05 BROCHURE TITLE IN STUDIO HEADER
   ---------------------------------------------------------
   Move brochure identity into the branded studio header and
   remove the duplicated action strip above the book.
   --------------------------------------------------------- */

.brochure-header {
  display: grid;

  grid-template-columns:
    auto
    minmax(180px, 1fr)
    auto;

  align-items: center;
}

.brochure-header-title {
  min-width: 0;

  margin-left: 8px;
  padding-left: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 3px;

  border-left:
    1px solid var(--cw-border);
}

.brochure-header-title span {
  display: block;

  color: var(--cw-gold);

  font-size: .64rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: .14em;
  text-transform: uppercase;
}

.brochure-header-title strong {
  display: block;

  overflow: hidden;

  color: var(--cw-navy);

  font-size:
    clamp(
      1.05rem,
      1.45vw,
      1.35rem
    );

  font-weight: 600;
  line-height: 1.15;

  letter-spacing: -.025em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * No marketing intro remains above the brochure.
 * The viewer now follows the studio header directly.
 */
.flipbook-shell {
  height:
    clamp(
      440px,
      calc(100svh - 108px),
      850px
    );

  margin-top: 10px;
}

/* Existing action area below the brochure is now definitive. */
.brochure-bottom-actions {
  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 7px;
}

.brochure-bottom-actions
  .brochure-primary-action,
.brochure-bottom-actions
  .brochure-secondary-action {
  white-space: nowrap;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .brochure-header {
    grid-template-columns:
      auto
      minmax(140px, 1fr)
      auto;
  }

  .brochure-header-title {
    padding-left: 14px;
  }

  .brochure-header-title strong {
    font-size: 1rem;
  }

  .brochure-header-title span {
    font-size: .57rem;
  }

  .flipbook-shell {
    height:
      clamp(
        420px,
        calc(100svh - 98px),
        800px
      );
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {
  .brochure-header {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
  }

  .brochure-header-title {
    margin-left: 2px;
    padding-left: 8px;

    border-left:
      1px solid var(--cw-border);
  }

  .brochure-header-title strong {
    font-size: .78rem;
  }

  .brochure-header-title span {
    font-size: .48rem;
    letter-spacing: .08em;
  }

  .brochure-bottom-actions {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
  }

  .flipbook-shell {
    height:
      clamp(
        390px,
        calc(100svh - 82px),
        740px
      );
  }
}

/* 2026-10-05 BROCHURE HOMEPAGE NAVIGATION
   ---------------------------------------------------------
   Use the same top-level navigation set as the main website.
   Doors is highlighted because the brochure viewer belongs
   to the Doors section.
   --------------------------------------------------------- */

.brochure-nav {
  gap: 2px;
}

.brochure-nav a {
  position: relative;

  min-height: 38px;

  padding:
    8px
    clamp(7px, .72vw, 11px);

  border-radius: 6px;

  font-size:
    clamp(
      .7rem,
      .72vw,
      .8rem
    );

  white-space: nowrap;
}

.brochure-nav a:not(.brochure-header-cta):hover,
.brochure-nav a:not(.brochure-header-cta):focus {
  border-color: transparent;

  background: #f4f7fa;
}

/* Active Doors section */
.brochure-nav .brochure-nav-active,
.brochure-nav a[aria-current="page"] {
  color: var(--cw-navy);

  background: #f4f6f8;

  border-color:
    rgba(176, 138, 74, .42);

  font-weight: 700;
}

.brochure-nav .brochure-nav-active::after,
.brochure-nav a[aria-current="page"]::after {
  content: "";

  position: absolute;

  left: 10px;
  right: 10px;
  bottom: 3px;

  height: 2px;

  border-radius: 999px;

  background: var(--cw-gold);
}

.brochure-nav-phone {
  width: 38px;

  flex: 0 0 38px;

  padding-left: 0 !important;
  padding-right: 0 !important;

  font-size: .95rem !important;
}

/*
 * Keep the primary CTA prominent without using the brighter
 * legacy gold button treatment.
 */
.brochure-nav .brochure-header-cta {
  margin-left: 5px;

  padding-left: 13px;
  padding-right: 13px;
}

/* ---------------------------------------------------------
   RESPONSIVE NAVIGATION
   --------------------------------------------------------- */

@media (max-width: 1280px) {
  .brochure-nav a {
    padding-left: 6px;
    padding-right: 6px;

    font-size: .68rem;
  }

  .brochure-nav .brochure-header-cta {
    padding-left: 9px;
    padding-right: 9px;
  }

  .brochure-nav-phone {
    width: 32px;
    flex-basis: 32px;
  }
}

@media (max-width: 1080px) {
  /*
   * Preserve the most useful navigation on smaller desktop /
   * tablet widths rather than allowing the header to wrap.
   */
  .brochure-nav a[href="index.html#about"],
  .brochure-nav a[href="index.html#contact"]:not(
    .brochure-header-cta
  ) {
    display: none;
  }
}

@media (max-width: 900px) {
  .brochure-nav a[href="index.html"],
  .brochure-nav a[href="index.html#windows"],
  .brochure-nav a[href="index.html#roof"],
  .brochure-nav-phone {
    display: none;
  }

  .brochure-nav .brochure-nav-active {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .brochure-nav .brochure-nav-active {
    display: none;
  }

  .brochure-nav .brochure-header-cta {
    margin-left: 0;
  }
}

/* 2026-10-05 BROCHURE VIEWER SIZE TUNING
   ---------------------------------------------------------
   Normal view should remain a generous embedded studio rather
   than feeling like fullscreen.

   True fullscreen retains the enlarged book, but provides a
   little breathing room above and below so the complete page
   remains comfortably visible.
   --------------------------------------------------------- */

/* NORMAL DESKTOP */
.flipbook-shell:not(:fullscreen) {
  height:
    clamp(
      500px,
      calc(100svh - 175px),
      700px
    );
}

/*
 * PageFlip is centred within the fullscreen stage.
 * A small vertical inset prevents the enlarged page from
 * sitting against the controls or clipping at the bottom.
 */
.flipbook-shell:fullscreen
  .flipbook-stage {
  padding:
    18px
    12px
    22px;
}

/* TABLET */
@media (max-width: 900px) {
  .flipbook-shell:not(:fullscreen) {
    height:
      clamp(
        430px,
        calc(100svh - 160px),
        650px
      );
  }

  .flipbook-shell:fullscreen
    .flipbook-stage {
    padding:
      14px
      8px
      18px;
  }
}

/* MOBILE */
@media (max-width: 640px) {
  .flipbook-shell:not(:fullscreen) {
    height:
      clamp(
        390px,
        calc(100svh - 145px),
        590px
      );
  }

  .flipbook-shell:fullscreen
    .flipbook-stage {
    padding:
      10px
      4px
      14px;
  }
}

/* 2026-10-05 FULLSCREEN BOOK VISUAL SCALE
   ---------------------------------------------------------
   Do not alter the normal embedded brochure at all.

   True fullscreen enlarges the complete already-rendered
   PageFlip book as one unit. This preserves its geometry,
   page ratio, current page and turning behaviour.
   --------------------------------------------------------- */



/*
 * Slightly reduce the enlargement on shorter displays so the
 * full page still clears the fullscreen toolbar and footer.
 */
@media (max-height: 800px) {

}

/*
 * Tablets need less enlargement because horizontal room is
 * more limited when a two-page spread is showing.
 */
@media (max-width: 900px) {

}

@media (max-width: 640px) {

}

/* 2026-10-05 HYBRID NAVY STUDIO SHELL
   ---------------------------------------------------------
   Website atmosphere outside.
   Clean Navy Studio workspace inside.

   This block is visual only:
   - no brochure sizing
   - no PageFlip geometry
   - no fullscreen scaling
   - no structural layout changes
   --------------------------------------------------------- */

/* =========================================================
   DARK ATMOSPHERIC PAGE
   ========================================================= */

body.brochure-page {
  background:
    #0b1824;
}

body.brochure-page::before {
  opacity: .34;

  filter:
    blur(3px)
    saturate(.8)
    contrast(1.02);

  transform:
    scale(1.018);
}

body.brochure-page::after {
  background:
    linear-gradient(
      180deg,
      rgba(8, 27, 43, .84) 0%,
      rgba(9, 29, 46, .90) 42%,
      rgba(7, 23, 36, .95) 100%
    );
}


/* =========================================================
   WEBSITE-STYLE NAVY GLASS HEADER
   ========================================================= */

.brochure-header {
  background:
    linear-gradient(
      180deg,
      rgba(20, 58, 88, .95) 0%,
      rgba(11, 36, 57, .94) 100%
    );

  border-bottom:
    1px solid rgba(176, 138, 74, .42);

  box-shadow:
    0 12px 34px rgba(0, 0, 0, .22);

  backdrop-filter:
    blur(16px)
    saturate(1.08);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(1.08);
}

/*
 * The approved banner artwork was designed for a light field.
 * Keep the artwork itself untouched and give it a restrained
 * frosted brand plate rather than filtering/recolouring it.
 */
.brochure-brand {
  padding:
    4px 11px
    3px;

  border:
    1px solid rgba(255, 255, 255, .17);

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, .94);

  box-shadow:
    0 7px 20px rgba(0, 0, 0, .12);
}

.brochure-brand-tagline {
  color:
    #667784;
}

.brochure-header-title {
  border-left:
    1px solid rgba(176, 138, 74, .38);
}

.brochure-header-title span {
  color:
    #d8b466;
}

.brochure-header-title strong {
  color:
    #ffffff;
}


/* =========================================================
   HEADER NAVIGATION
   ========================================================= */

.brochure-nav a:not(.brochure-header-cta) {
  color:
    rgba(255, 255, 255, .92);
}

.brochure-nav a:not(.brochure-header-cta):hover,
.brochure-nav a:not(.brochure-header-cta):focus {
  color:
    #ffffff;

  border-color:
    rgba(255, 255, 255, .08);

  background:
    rgba(255, 255, 255, .08);
}

/* Active Doors section */
.brochure-nav .brochure-nav-active,
.brochure-nav a[aria-current="page"] {
  color:
    #ffffff;

  border-color:
    rgba(216, 180, 102, .48);

  background:
    rgba(216, 180, 102, .12);

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, .025);
}

.brochure-nav .brochure-nav-active::after,
.brochure-nav a[aria-current="page"]::after {
  background:
    #d8b466;
}

.brochure-nav-phone {
  color:
    #ffffff !important;
}

/* Match the marketing-site hierarchy: gold primary CTA. */
.brochure-nav .brochure-header-cta {
  color:
    #10283c;

  border-color:
    #d8b13f;

  background:
    linear-gradient(
      180deg,
      #e6bf48,
      #d7aa2c
    );

  box-shadow:
    0 6px 18px rgba(0, 0, 0, .16);
}

.brochure-nav .brochure-header-cta:hover,
.brochure-nav .brochure-header-cta:focus {
  color:
    #0b2032;

  border-color:
    #eccb64;

  background:
    linear-gradient(
      180deg,
      #edc957,
      #dfb536
    );

  transform:
    translateY(-1px);
}


/* =========================================================
   DARK OUTER STUDIO / LIGHT WORKSPACE
   ========================================================= */

/*
 * The shell belongs to the website atmosphere.
 * The actual reading stage immediately inside it remains light.
 */
.flipbook-shell {
  border:
    1px solid rgba(255, 255, 255, .14);

  background:
    linear-gradient(
      145deg,
      rgba(17, 48, 72, .91),
      rgba(8, 27, 43, .94)
    );

  box-shadow:
    0 24px 60px rgba(0, 0, 0, .27);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

/*
 * Deliberately preserve the bright reading surface.
 * This is the Navy Studio workspace rather than another
 * dark marketing panel.
 */
.flipbook-stage {
  border:
    1px solid rgba(17, 38, 58, .10);

  background:
    linear-gradient(
      145deg,
      rgba(252, 253, 254, .985) 0%,
      rgba(238, 243, 246, .985) 100%
    );

  box-shadow:
    inset 0 0 32px rgba(17, 38, 58, .035);
}


/* =========================================================
   BOTTOM MARKETING CTA — BACK INTO THE DARK SHELL
   ========================================================= */

.brochure-bottom-cta {
  border:
    1px solid rgba(255, 255, 255, .13);

  background:
    linear-gradient(
      135deg,
      rgba(18, 53, 80, .94),
      rgba(9, 30, 47, .96)
    );

  box-shadow:
    0 22px 52px rgba(0, 0, 0, .23);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.brochure-bottom-cta h1,
.brochure-bottom-cta h2,
.brochure-bottom-cta h3 {
  color:
    #ffffff;
}

.brochure-bottom-cta p {
  color:
    rgba(255, 255, 255, .72);
}

.brochure-bottom-cta
  .eyebrow,
.brochure-bottom-cta
  [class*="eyebrow"] {
  color:
    #d8b466;
}

/* Primary marketing action */
.brochure-bottom-cta
  .brochure-primary-action {
  color:
    #10283c;

  border-color:
    #d8b13f;

  background:
    linear-gradient(
      180deg,
      #e6bf48,
      #d7aa2c
    );

  box-shadow:
    0 7px 20px rgba(0, 0, 0, .16);
}

/* Supporting actions remain restrained and clean. */
.brochure-bottom-cta
  .brochure-secondary-action,
.brochure-bottom-cta
  #brochureDownloadAction {
  color:
    #ffffff;

  border-color:
    rgba(255, 255, 255, .28);

  background:
    rgba(255, 255, 255, .055);
}

.brochure-bottom-cta
  .brochure-secondary-action:hover,
.brochure-bottom-cta
  .brochure-secondary-action:focus,
.brochure-bottom-cta
  #brochureDownloadAction:hover,
.brochure-bottom-cta
  #brochureDownloadAction:focus {
  border-color:
    rgba(216, 180, 102, .62);

  background:
    rgba(255, 255, 255, .10);
}


/* =========================================================
   RESPONSIVE POLISH
   ========================================================= */

@media (max-width: 900px) {
  .brochure-brand {
    padding:
      3px 8px
      2px;

    border-radius:
      8px;
  }
}

@media (max-width: 640px) {
  body.brochure-page::before {
    opacity:
      .25;
  }

  .brochure-brand {
    padding:
      2px 5px;

    border-radius:
      7px;
  }
}

/* 2026-10-05 FINAL APPROVED BROCHURE UI
   =========================================================
   Consolidated final visual layer.

   Approved:
   - white Chester Windows banner on navy
   - lighter blue viewer shell and CTA card
   - compact brochure-library landing screen
   - flat slate viewer controls
   - centred fullscreen control
   - white page counter
   - navy text on gold header CTA
   ========================================================= */


/* ---------------------------------------------------------
   BRAND ON NAVY HEADER
   --------------------------------------------------------- */

.brochure-brand {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brochure-brand img {
  filter:
    drop-shadow(
      0 3px 7px
      rgba(0, 0, 0, .18)
    );
}

.brochure-brand-tagline {
  color:
    rgba(255, 255, 255, .76);
}

.brochure-brand-tagline b {
  color:
    #d8b466;
}


/* ---------------------------------------------------------
   LIGHTER NAVY STUDIO INTERFACE
   --------------------------------------------------------- */

.flipbook-shell {
  border-color:
    rgba(122, 166, 196, .30);

  background:
    linear-gradient(
      145deg,
      rgba(27, 71, 103, .96),
      rgba(20, 56, 83, .97)
    );

  box-shadow:
    0 24px 60px
    rgba(0, 0, 0, .25);
}

.brochure-bottom-cta {
  border-color:
    rgba(122, 166, 196, .28);

  background:
    linear-gradient(
      135deg,
      rgba(29, 76, 110, .96),
      rgba(20, 59, 88, .97)
    );
}

.brochure-bottom-cta
.brochure-secondary-action,
.brochure-bottom-cta
#brochureDownloadAction {
  color: #ffffff;

  border-color:
    rgba(188, 214, 231, .34);

  background:
    rgba(64, 111, 144, .42);
}

.brochure-bottom-cta
.brochure-secondary-action:hover,
.brochure-bottom-cta
.brochure-secondary-action:focus,
.brochure-bottom-cta
#brochureDownloadAction:hover,
.brochure-bottom-cta
#brochureDownloadAction:focus {
  background:
    rgba(76, 128, 162, .58);

  border-color:
    rgba(216, 180, 102, .55);
}

.brochure-nav .brochure-nav-active,
.brochure-nav a[aria-current="page"] {
  background:
    rgba(63, 111, 144, .40);

  border-color:
    rgba(216, 180, 102, .55);
}


/* ---------------------------------------------------------
   BROCHURE LIBRARY LANDING SCREEN
   --------------------------------------------------------- */

.brochure-library-mode .flipbook-toolbar {
  display: none;
}

.brochure-library-mode .flipbook-stage {
  min-height: 520px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 32px;
}

.brochure-library-landing {
  width: min(760px, 100%);
  margin: auto;
  padding: 20px 8px;
}

.brochure-library-intro {
  width: min(560px, 100%);
  max-width: 560px;
  margin: 0 auto 20px;
  text-align: center;
}

.brochure-library-kicker {
  margin: 0 0 8px;
  color: #b08a4a;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brochure-library-intro h1 {
  margin: 0 0 12px;
  color: #173750;

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(1.2rem, 2vw, 1.55rem);

  font-weight: 700;
  line-height: 1.08;
}

.brochure-library-intro p:last-child {
  max-width: 520px;
  margin: 0 auto;
  color: #607282;
  font-size: .94rem;
  line-height: 1.65;
}

.brochure-library-mode .brochure-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brochure-library-mode
.brochure-selector-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  grid-template-rows:
    auto auto;

  column-gap: 24px;
  row-gap: 3px;
  align-items: center;

  width: 100%;
  padding: 15px 18px;

  border:
    1px solid #d5e0e7;

  border-radius: 10px;
  background: #edf4f8;
  color: #173750;
  text-decoration: none;

  box-shadow:
    0 5px 14px
    rgba(17, 38, 58, .05);

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.brochure-library-mode
.brochure-selector-card:hover,
.brochure-library-mode
.brochure-selector-card:focus {
  border-color: #8caec4;
  background: #e3eef5;
  color: #173750;

  box-shadow:
    0 8px 18px
    rgba(17, 38, 58, .09);

  transform:
    translateY(-1px);
}

.brochure-library-mode
.brochure-selector-category {
  grid-column: 1;
  grid-row: 1;

  color: #8c6c34;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.brochure-library-mode
.brochure-selector-card strong {
  grid-column: 1;
  grid-row: 2;

  color: #173750;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
}

.brochure-library-mode
.brochure-selector-card::after {
  content: "Open brochure  →";

  grid-column: 2;
  grid-row: 1 / span 2;

  color: #386987;
  font-size: .74rem;
  font-weight: 750;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   LIVE BROCHURE VIEWER CONTROLS
   --------------------------------------------------------- */

#brochurePrev,
#brochureNext,
#brochureFullscreen {
  color: #ffffff !important;

  border:
    1px solid
    rgba(190, 210, 223, .30) !important;

  border-radius: 10px !important;
  background: #45677e !important;
  box-shadow: none !important;
  font-weight: 700;
  transform: none !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

#brochurePrev:hover:not(:disabled),
#brochurePrev:focus-visible:not(:disabled),
#brochureNext:hover:not(:disabled),
#brochureNext:focus-visible:not(:disabled),
#brochureFullscreen:hover,
#brochureFullscreen:focus-visible {
  color: #ffffff !important;

  border-color:
    rgba(216, 180, 102, .72) !important;

  background: #50758e !important;

  box-shadow:
    0 4px 12px
    rgba(5, 23, 36, .14) !important;

  transform: none !important;
}

#brochurePrev:disabled,
#brochureNext:disabled {
  color:
    rgba(255, 255, 255, .52) !important;

  border-color:
    rgba(190, 210, 223, .14) !important;

  background: #536a79 !important;
  box-shadow: none !important;
  cursor: default;
  opacity: .58;
}

.flipbook-page-status,
#brochurePageText {
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   CENTRED FULLSCREEN CONTROL
   --------------------------------------------------------- */

.flipbook-footer-controls {
  display: grid !important;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;
  gap: 16px;
}

#brochureFullscreen {
  grid-column: 2;

  display: inline-flex !important;

  align-items: center;
  justify-content: center;
  justify-self: center;

  width: auto !important;
  min-width: 180px;
  max-width: calc(100% - 32px);

  margin: 0 !important;
  padding: 12px 24px !important;
}

.flipbook-hint {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}


/* ---------------------------------------------------------
   HEADER PRIMARY CTA
   --------------------------------------------------------- */

.brochure-nav .brochure-header-cta,
.brochure-nav .brochure-header-cta:link,
.brochure-nav .brochure-header-cta:visited,
.brochure-nav .brochure-header-cta:hover,
.brochure-nav .brochure-header-cta:focus,
.brochure-nav .brochure-header-cta:active {
  color: #173750 !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .brochure-brand {
    padding: 0;
    border-radius: 0;
  }
}

@media (max-width: 700px) {
  .flipbook-footer-controls {
    grid-template-columns: 1fr;
  }

  #brochureFullscreen {
    grid-column: 1;
  }

  .flipbook-hint {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .brochure-brand {
    padding: 0;
    border-radius: 0;
  }

  .brochure-library-mode .flipbook-stage {
    min-height: 470px;
    padding: 22px 16px;
  }

  .brochure-library-landing {
    padding: 10px 0;
  }

  .brochure-library-mode
  .brochure-selector-card {
    column-gap: 12px;
    padding: 14px;
  }

  .brochure-library-mode
  .brochure-selector-card::after {
    content: "Open →";
  }

  #brochureFullscreen {
    min-width: 150px;
    padding: 11px 20px !important;
  }
}

/* 2026-10-05 BROCHURE APPROVED BRAND LOCKUP
   ---------------------------------------------------------
   Same banner dimensions and tagline spacing as the
   Door Designer "Choose Your Door" reference.
   --------------------------------------------------------- */

.brochure-brand {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0;

  width:
    max-content;
}

.brochure-brand-tagline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    9px;

  width:
    max-content;

  margin:
    -3px 0 0;

  color:
    rgba(255, 255, 255, .82);

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.brochure-brand-tagline b {
  color:
    #d8b466;

  font-size:
    9px;
}

@media (min-width: 1001px) {
  .brochure-header {
    min-height:
      126px;

    height:
      126px;

    padding-left:
      28px;
  }

  .brochure-brand img {
    display:
      block;

    width:
      250px !important;

    height:
      84px !important;

    max-width:
      none !important;

    max-height:
      none !important;

    object-fit:
      contain;

    object-position:
      center center;
  }
}

@media (max-width: 1000px) {
  .brochure-brand img {
    width:
      min(210px, 48vw) !important;

    height:
      auto !important;
  }

  .brochure-brand-tagline {
    gap:
      6px;

    font-size:
      7px;

    letter-spacing:
      .12em;
  }
}

/* 2026-10-06 EXACT HOMEPAGE THEME — BROCHURE VIEWER
   =========================================================
   Visual values copied from the approved homepage.
   PageFlip dimensions and fullscreen behaviour untouched.
   ========================================================= */

:root {
  --cw-home-navy: #0A2540;
  --cw-home-gold: #D4AF37;
  --cw-home-white: #FFFFFF;
  --cw-home-mist: #f6f7f8;

  --cw-home-section:
    radial-gradient(
      circle at 50% 0%,
      rgba(36, 88, 122, .18),
      transparent 42%
    ),
    #0b1824;

  --cw-home-card:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  --cw-home-card-border:
    rgba(125, 166, 192, .30);

  --cw-home-action-border:
    rgba(132, 175, 201, .36);
}


/* PAGE */

body.brochure-page {
  color:
    #ffffff;

  background:
    var(--cw-home-section);
}


/* HOMEPAGE HEADER */

.brochure-header {
  min-height:
    126px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .18);

  background:
    linear-gradient(
      180deg,
      rgba(34, 76, 112, .97) 0%,
      rgba(23, 58, 91, .86) 48%,
      rgba(10, 37, 64, .50) 100%
    );

  box-shadow:
    none;
}

.brochure-brand img {
  width:
    250px !important;

  height:
    84px !important;

  max-width:
    none !important;

  max-height:
    none !important;

  object-fit:
    contain;
}

.brochure-brand-tagline {
  gap:
    9px;

  margin:
    -3px 0 0;

  color:
    rgba(255, 255, 255, .82);

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;
}


/* HEADER TITLE */

.brochure-header-title span {
  color:
    #D4AF37;

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}

.brochure-header-title strong {
  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    600;
}


/* NAV — HOMEPAGE ACTION LANGUAGE */

.brochure-nav a:not(.brochure-header-cta) {
  color:
    #e8f1f6;
}

.brochure-nav a:not(.brochure-header-cta):hover,
.brochure-nav a:not(.brochure-header-cta):focus {
  color:
    #ffffff;
}

.brochure-nav .brochure-nav-active,
.brochure-nav a[aria-current="page"] {
  color:
    #D4AF37;
}

.brochure-nav .brochure-header-cta {
  background:
    #D4AF37 !important;

  border-color:
    #D4AF37 !important;

  color:
    #0A2540 !important;

  font-weight:
    700;
}


/* MAIN */

.brochure-main {
  background:
    transparent;
}


/* LIBRARY INTRO — HOMEPAGE SECTION HEADING */

.brochure-library-intro {
  max-width:
    1180px;

  margin-left:
    auto;

  margin-right:
    auto;

  text-align:
    center;
}

.brochure-library-kicker {
  color:
    #D4AF37;

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .17em;
}

.brochure-library-intro h1 {
  margin:
    0 0 .55rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.8rem, 3.7vw, 3.8rem);

  font-weight:
    600;

  line-height:
    1.02;

  letter-spacing:
    -.025em;
}

.brochure-library-intro p {
  color:
    #b8c8d3;

  font-size:
    .9rem;

  line-height:
    1.55;
}


/* LIBRARY CARDS — EXACT HOMEPAGE PRODUCT CARDS */

.brochure-library-mode
.brochure-selector-card {
  border:
    1px solid
    var(--cw-home-card-border);

  border-radius:
    6px;

  background:
    var(--cw-home-card);

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);

  color:
    #ffffff;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.brochure-library-mode
.brochure-selector-card:hover,
.brochure-library-mode
.brochure-selector-card:focus {
  border-color:
    rgba(212, 175, 55, .62);

  background:
    var(--cw-home-card);
}

.brochure-library-mode
.brochure-selector-card strong {
  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.42rem;

  font-weight:
    600;

  line-height:
    1.1;
}

.brochure-library-mode
.brochure-selector-category {
  color:
    #D4AF37;
}

.brochure-library-mode
.brochure-selector-card p {
  color:
    #b8c8d3;
}


/* VIEWER SHELL — HOMEPAGE CARD FRAME */

.flipbook-shell {
  border:
    1px solid
    var(--cw-home-card-border);

  border-radius:
    6px;

  background:
    var(--cw-home-card);

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}

.flipbook-stage {
  background:
    #10283c;
}


/* VIEWER CHROME — HOMEPAGE FOOTER / ACTIONS */

.flipbook-toolbar,
.flipbook-footer-controls {
  border-color:
    rgba(137, 177, 202, .18);

  background:
    #08141f;
}

#brochurePrev,
#brochureNext,
#brochureFullscreen {
  min-height:
    43px;

  border:
    1px solid
    var(--cw-home-action-border);

  border-radius:
    5px;

  background:
    rgba(8, 31, 48, .44);

  color:
    #e8f1f6;

  font-size:
    .8rem;

  font-weight:
    700;

  letter-spacing:
    .025em;

  box-shadow:
    none;
}

#brochurePrev:hover:not(:disabled),
#brochureNext:hover:not(:disabled),
#brochureFullscreen:hover,
#brochurePrev:focus-visible:not(:disabled),
#brochureNext:focus-visible:not(:disabled),
#brochureFullscreen:focus-visible {
  border-color:
    rgba(216, 180, 102, .68);

  background:
    rgba(20, 59, 86, .82);

  color:
    #ffffff;
}


/* BOTTOM CTA — HOMEPAGE DARK SECTION */

.brochure-bottom-cta {
  border:
    0;

  border-top:
    1px solid
    rgba(137, 177, 202, .14);

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;
}

.brochure-bottom-cta h2 {
  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    600;
}

.brochure-bottom-cta p {
  color:
    #b8c8d3;
}


/* CTA BUTTONS */

.brochure-primary-action {
  background:
    #D4AF37 !important;

  border-color:
    #D4AF37 !important;

  color:
    #0A2540 !important;

  font-weight:
    700;
}

.brochure-secondary-action,
#brochureDownloadAction {
  border:
    1px solid
    var(--cw-home-action-border);

  border-radius:
    5px;

  background:
    rgba(8, 31, 48, .44);

  color:
    #e8f1f6;

  font-size:
    .8rem;

  font-weight:
    700;
}


/* HOMEPAGE RESPONSIVE BRAND */

@media (max-width: 1000px) {
  .brochure-header {
    min-height:
      92px;
  }

  .brochure-brand img {
    width:
      min(210px, 48vw) !important;

    height:
      auto !important;

    max-height:
      62px !important;
  }

  .brochure-brand-tagline {
    gap:
      6px;

    margin-top:
      -2px;

    font-size:
      7px;

    letter-spacing:
      .12em;
  }
}

@media (max-width: 640px) {

  .brochure-library-intro h1 {
    font-size:
      clamp(2rem, 9vw, 2.5rem);

    line-height:
      1.02;
  }

  .brochure-library-mode
  .brochure-selector-card {
    border-radius:
      5px;
  }

  .brochure-library-mode
  .brochure-selector-card strong {
    font-size:
      1.22rem;

    line-height:
      1.08;
  }
}

/* 2026-10-06 EXACT HOMEPAGE PRECISION CTA LOCK
   Remove solid-gold brochure CTAs so brochure controls use
   the same final homepage precision-button treatment. */

.brochure-primary-action,
.brochure-nav .brochure-header-cta,
.brochure-nav .brochure-header-cta:link,
.brochure-nav .brochure-header-cta:visited,
.brochure-nav .brochure-header-cta:hover,
.brochure-nav .brochure-header-cta:focus,
.brochure-nav .brochure-header-cta:active {
  min-height:
    42px;

  border:
    1px solid
    rgba(216, 180, 102, .82) !important;

  border-radius:
    5px !important;

  background:
    linear-gradient(
      180deg,
      rgba(25, 67, 96, .98),
      rgba(13, 39, 58, .98)
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .07),
    inset 0 -1px 0
    rgba(0, 0, 0, .18),
    0 7px 18px
    rgba(0, 0, 0, .18);

  font-weight:
    750;

  letter-spacing:
    .055em;

  transform:
    none;
}

.brochure-primary-action:hover,
.brochure-primary-action:focus {
  border-color:
    rgba(216, 180, 102, .68) !important;

  background:
    rgba(20, 59, 86, .82) !important;

  color:
    #ffffff !important;
}

/* 2026-10-06 BROCHURE LIBRARY FIT + THEME LOCK
   =========================================================
   The brochure library landing contains more vertical
   content than the ordinary PageFlip viewer.

   The existing fixed-height viewer shell was clipping the
   footer / Fullscreen control.  Library mode therefore uses
   intrinsic height while the actual brochure viewer keeps
   its existing tuned PageFlip dimensions.

   Visual values below lock this screen to the approved
   Chester Windows homepage language.
   ========================================================= */


/* ---------------------------------------------------------
   LIBRARY SHELL — ALLOW ALL CONTENT TO FIT
   --------------------------------------------------------- */

.flipbook-shell.brochure-library-mode:not(:fullscreen) {
  height:
    auto !important;

  min-height:
    760px !important;

  overflow:
    hidden !important;

  border:
    1px solid rgba(125,166,192,.30) !important;

  border-radius:
    6px !important;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    ) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.18) !important;
}


/* Give the landing area enough genuine vertical room rather
   than squeezing its contents into the old PageFlip height. */

.flipbook-shell.brochure-library-mode:not(:fullscreen)
.flipbook-stage {
  flex:
    1 0 auto !important;

  min-height:
    650px !important;

  padding:
    36px 32px 30px !important;

  overflow:
    hidden !important;

  border-radius:
    6px !important;

  background:
    #10283c !important;
}


/* ---------------------------------------------------------
   LIBRARY TYPOGRAPHY — HOMEPAGE STANDARD
   --------------------------------------------------------- */

.brochure-library-kicker {
  color:
    #D4AF37 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-weight:
    800 !important;
}


.brochure-library-intro h1 {
  color:
    #ffffff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-weight:
    600 !important;
}


.brochure-library-intro p {
  color:
    #b8c8d3 !important;
}


/* ---------------------------------------------------------
   LIBRARY CARDS — HOMEPAGE PRODUCT-CARD STANDARD
   --------------------------------------------------------- */

.brochure-library-mode
.brochure-selector-card {
  border:
    1px solid rgba(125,166,192,.30) !important;

  border-radius:
    6px !important;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    ) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.18) !important;
}


.brochure-library-mode
.brochure-selector-card strong {
  color:
    #ffffff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-weight:
    600 !important;
}


.brochure-library-mode
.brochure-selector-category {
  color:
    #D4AF37 !important;
}


/* ---------------------------------------------------------
   FOOTER — KEEP FULLSCREEN COMPLETELY INSIDE THE SHELL
   --------------------------------------------------------- */

.flipbook-shell.brochure-library-mode:not(:fullscreen)
.flipbook-footer-controls {
  flex:
    0 0 auto !important;

  display:
    grid !important;

  grid-template-columns:
    1fr auto 1fr !important;

  align-items:
    center !important;

  gap:
    16px !important;

  min-height:
    62px !important;

  margin:
    0 !important;

  padding:
    10px 6px 2px !important;

  border-top:
    1px solid rgba(125,166,192,.18) !important;

  background:
    #08141f !important;
}


/* Fullscreen is an action control, not forward navigation.
   It deliberately does NOT receive the new Next icon. */

#brochureFullscreen {
  grid-column:
    2 !important;

  justify-self:
    center !important;

  min-width:
    180px !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  padding:
    10px 22px !important;

  border:
    1px solid rgba(216,180,102,.82) !important;

  border-radius:
    5px !important;

  background:
    rgba(8,31,48,.78) !important;

  color:
    #ffffff !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    .8rem !important;

  font-weight:
    700 !important;

  box-shadow:
    none !important;
}


#brochureFullscreen:hover,
#brochureFullscreen:focus-visible {
  border-color:
    #F5D78E !important;

  background:
    #173f5c !important;
}


.flipbook-hint {
  color:
    #b8c8d3 !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .flipbook-shell.brochure-library-mode:not(:fullscreen) {
    height:
      auto !important;

    min-height:
      710px !important;
  }

  .flipbook-shell.brochure-library-mode:not(:fullscreen)
  .flipbook-stage {
    min-height:
      600px !important;

    padding:
      30px 22px 26px !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

  .flipbook-shell.brochure-library-mode:not(:fullscreen) {
    height:
      auto !important;

    min-height:
      650px !important;
  }

  .flipbook-shell.brochure-library-mode:not(:fullscreen)
  .flipbook-stage {
    min-height:
      540px !important;

    padding:
      24px 16px !important;
  }

  .flipbook-shell.brochure-library-mode:not(:fullscreen)
  .flipbook-footer-controls {
    grid-template-columns:
      1fr !important;

    gap:
      8px !important;

    padding:
      10px 4px 4px !important;
  }

  #brochureFullscreen {
    grid-column:
      1 !important;

    width:
      min(220px, 100%) !important;

    min-width:
      0 !important;
  }

  .flipbook-hint {
    grid-column:
      1 !important;

    justify-self:
      center !important;

    text-align:
      center !important;
  }
}

/* 2026-10-06 BROCHURE LIBRARY FINAL FIT + THEME LOCK
   =========================================================
   Library landing is content-driven.
   Actual PageFlip brochure sizing remains untouched.
   ========================================================= */


/* ---------------------------------------------------------
   LIBRARY OUTER SHELL
   --------------------------------------------------------- */

:is(
  .brochure-library-mode .flipbook-shell,
  .flipbook-shell.brochure-library-mode
):not(:fullscreen) {
  height:
    auto !important;

  min-height:
    790px !important;

  max-height:
    none !important;

  margin:
    6px auto 22px !important;

  padding:
    12px !important;

  overflow:
    hidden !important;

  border:
    1px solid rgba(125,166,192,.30) !important;

  border-radius:
    6px !important;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    ) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.18) !important;
}


/* ---------------------------------------------------------
   LIBRARY CONTENT STAGE
   --------------------------------------------------------- */

:is(
  .brochure-library-mode .flipbook-shell,
  .flipbook-shell.brochure-library-mode
):not(:fullscreen)
.flipbook-stage {
  flex:
    0 0 auto !important;

  min-height:
    660px !important;

  height:
    auto !important;

  padding:
    36px 32px 30px !important;

  overflow:
    hidden !important;

  border-radius:
    6px !important;

  background:
    #10283c !important;
}


/* ---------------------------------------------------------
   LIBRARY TYPOGRAPHY
   --------------------------------------------------------- */

.brochure-library-kicker {
  color:
    #D4AF37 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    .72rem !important;

  font-weight:
    800 !important;

  letter-spacing:
    .17em !important;
}


.brochure-library-intro h1 {
  color:
    #ffffff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-weight:
    600 !important;

  line-height:
    1.02 !important;
}


.brochure-library-intro p {
  color:
    #b8c8d3 !important;
}


/* ---------------------------------------------------------
   BROCHURE CARDS
   --------------------------------------------------------- */

.brochure-library-mode
.brochure-selector {
  gap:
    10px !important;
}


.brochure-library-mode
.brochure-selector-card {
  border:
    1px solid rgba(125,166,192,.30) !important;

  border-radius:
    6px !important;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.18) !important;
}


.brochure-library-mode
.brochure-selector-card strong {
  color:
    #ffffff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-weight:
    600 !important;
}


.brochure-library-mode
.brochure-selector-category {
  color:
    #D4AF37 !important;
}


.brochure-library-mode
.brochure-selector-card p {
  color:
    #b8c8d3 !important;
}


/* ---------------------------------------------------------
   EXISTING "OPEN BROCHURE" FORWARD INDICATOR
   Replace the OLD arrow only with the approved premium icon.
   --------------------------------------------------------- */

.brochure-library-mode
.brochure-selector-card::after {
  content:
    "Open brochure" !important;

  min-height:
    28px;

  padding-right:
    34px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  color:
    #b8c8d3 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    .78rem !important;

  font-weight:
    700 !important;

  white-space:
    nowrap !important;

  background-image:
    url("assets/ui/next-action.png") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    right center !important;

  background-size:
    27px 27px !important;
}


.brochure-library-mode
.brochure-selector-card:hover::after,
.brochure-library-mode
.brochure-selector-card:focus::after {
  color:
    #ffffff !important;
}


/* ---------------------------------------------------------
   FOOTER — FULLY INSIDE THE OUTER FRAME
   --------------------------------------------------------- */

:is(
  .brochure-library-mode .flipbook-shell,
  .flipbook-shell.brochure-library-mode
):not(:fullscreen)
.flipbook-footer-controls {
  flex:
    0 0 auto !important;

  display:
    grid !important;

  grid-template-columns:
    1fr auto 1fr !important;

  align-items:
    center !important;

  gap:
    16px !important;

  min-height:
    72px !important;

  margin:
    0 !important;

  padding:
    12px 8px 6px !important;

  overflow:
    visible !important;

  border-top:
    1px solid rgba(125,166,192,.18) !important;

  background:
    #08141f !important;
}


/* Fullscreen is not forward navigation, so no Next icon. */

#brochureFullscreen {
  grid-column:
    2 !important;

  justify-self:
    center !important;

  width:
    auto !important;

  min-width:
    180px !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  padding:
    10px 24px !important;

  border:
    1px solid rgba(216,180,102,.82) !important;

  border-radius:
    5px !important;

  background:
    rgba(8,31,48,.78) !important;

  color:
    #ffffff !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    .8rem !important;

  font-weight:
    700 !important;

  box-shadow:
    none !important;
}


#brochureFullscreen:hover,
#brochureFullscreen:focus-visible {
  border-color:
    #F5D78E !important;

  background:
    #173f5c !important;
}


.flipbook-hint {
  grid-column:
    3 !important;

  justify-self:
    end !important;

  color:
    #b8c8d3 !important;

  text-align:
    right !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  :is(
    .brochure-library-mode .flipbook-shell,
    .flipbook-shell.brochure-library-mode
  ):not(:fullscreen) {
    height:
      auto !important;

    min-height:
      730px !important;

    max-height:
      none !important;
  }

  :is(
    .brochure-library-mode .flipbook-shell,
    .flipbook-shell.brochure-library-mode
  ):not(:fullscreen)
  .flipbook-stage {
    min-height:
      600px !important;

    padding:
      30px 22px 26px !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

  :is(
    .brochure-library-mode .flipbook-shell,
    .flipbook-shell.brochure-library-mode
  ):not(:fullscreen) {
    height:
      auto !important;

    min-height:
      680px !important;

    max-height:
      none !important;
  }

  :is(
    .brochure-library-mode .flipbook-shell,
    .flipbook-shell.brochure-library-mode
  ):not(:fullscreen)
  .flipbook-stage {
    min-height:
      550px !important;

    padding:
      24px 16px !important;
  }

  .brochure-library-mode
  .brochure-selector-card::after {
    content:
      "Open" !important;

    padding-right:
      30px !important;

    background-size:
      24px 24px !important;
  }

  :is(
    .brochure-library-mode .flipbook-shell,
    .flipbook-shell.brochure-library-mode
  ):not(:fullscreen)
  .flipbook-footer-controls {
    grid-template-columns:
      1fr !important;

    min-height:
      auto !important;

    gap:
      8px !important;

    padding:
      12px 6px 8px !important;
  }

  #brochureFullscreen {
    grid-column:
      1 !important;

    width:
      min(220px,100%) !important;

    min-width:
      0 !important;

    justify-self:
      center !important;
  }

  .flipbook-hint {
    grid-column:
      1 !important;

    justify-self:
      center !important;

    text-align:
      center !important;
  }
}

/* 2026-10-06 BROCHURE LIBRARY NATURAL HEIGHT
   ---------------------------------------------------------
   The footer is now correctly contained, so the library
   shell no longer needs an artificial minimum height.
   Allow the stage + footer + shell padding to determine
   the exact height and remove the empty lower strip.
   --------------------------------------------------------- */

:is(
  .brochure-library-mode .flipbook-shell,
  .flipbook-shell.brochure-library-mode
):not(:fullscreen) {
  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;
}


@media (max-width: 900px) {

  :is(
    .brochure-library-mode .flipbook-shell,
    .flipbook-shell.brochure-library-mode
  ):not(:fullscreen) {
    min-height:
      0 !important;
  }
}


@media (max-width: 640px) {

  :is(
    .brochure-library-mode .flipbook-shell,
    .flipbook-shell.brochure-library-mode
  ):not(:fullscreen) {
    min-height:
      0 !important;
  }
}

/* 2026-10-06 BROCHURE FOOTER FINAL BALANCE
   ---------------------------------------------------------
   Keep Fullscreen visually centred while allowing the
   instructional copy to wrap cleanly inside the available
   right-hand column.
   --------------------------------------------------------- */

.flipbook-footer-controls {
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr) !important;

  column-gap:
    24px !important;

  overflow:
    hidden !important;
}


#brochureFullscreen {
  grid-column:
    2 !important;

  align-self:
    center !important;

  justify-self:
    center !important;
}


.flipbook-hint {
  grid-column:
    3 !important;

  justify-self:
    end !important;

  width:
    min(100%, 430px) !important;

  max-width:
    430px !important;

  white-space:
    normal !important;

  overflow:
    visible !important;

  text-overflow:
    clip !important;

  color:
    #b8c8d3 !important;

  font-size:
    .74rem !important;

  line-height:
    1.4 !important;

  text-align:
    right !important;
}


/* Shorter desktop widths need slightly less separation. */

@media (max-width: 1100px) {

  .flipbook-footer-controls {
    column-gap:
      14px !important;
  }

  .flipbook-hint {
    max-width:
      330px !important;

    font-size:
      .7rem !important;
  }
}


/* Tablet/mobile already moves the footer to one column. */

@media (max-width: 700px) {

  .flipbook-footer-controls {
    grid-template-columns:
      1fr !important;

    row-gap:
      8px !important;
  }

  #brochureFullscreen {
    grid-column:
      1 !important;
  }

  .flipbook-hint {
    grid-column:
      1 !important;

    justify-self:
      center !important;

    width:
      min(100%, 420px) !important;

    max-width:
      420px !important;

    text-align:
      center !important;
  }
}

/* 2026-10-06 BROCHURE FOOTER CONTENT FIT
   ---------------------------------------------------------
   Footer must size itself from its actual contents.
   No clipping of Fullscreen or wrapped guidance text.
   --------------------------------------------------------- */

.flipbook-footer-controls {
  flex:
    0 0 auto !important;

  height:
    auto !important;

  min-height:
    68px !important;

  padding:
    10px 16px !important;

  overflow:
    visible !important;

  align-items:
    center !important;
}


/* Keep Fullscreen comfortably clear of both edges. */

#brochureFullscreen {
  align-self:
    center !important;

  min-height:
    43px !important;

  margin:
    0 !important;
}


/* Guidance may wrap naturally without being cropped. */

.flipbook-hint {
  align-self:
    center !important;

  width:
    min(100%, 500px) !important;

  max-width:
    500px !important;

  margin:
    0 !important;

  white-space:
    normal !important;

  overflow:
    visible !important;

  line-height:
    1.35 !important;
}


/* Shell remains content-driven. */

.flipbook-shell:not(:fullscreen) {
  max-height:
    none !important;
}


/* Tablet / narrow desktop */

@media (max-width: 1100px) {

  .flipbook-footer-controls {
    min-height:
      76px !important;
  }

  .flipbook-hint {
    max-width:
      360px !important;
  }
}


/* Mobile stacks cleanly */

@media (max-width: 700px) {

  .flipbook-footer-controls {
    min-height:
      0 !important;

    padding:
      12px 10px !important;

    overflow:
      visible !important;
  }

  .flipbook-hint {
    width:
      min(100%, 420px) !important;

    max-width:
      420px !important;
  }
}

/* 2026-10-06 BROCHURE CTA PREMIUM EMBLEMS
   =========================================================
   Reuse the approved Chester Windows premium emblem language
   across the three brochure follow-on actions.
   ========================================================= */


/* ---------------------------------------------------------
   SHARED CTA GEOMETRY
   --------------------------------------------------------- */

#brochurePrimaryAction,
#brochureSecondaryAction,
#brochureDownloadAction {
  position:
    relative !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    66px !important;

  padding:
    11px 18px 11px 66px !important;

  border-radius:
    5px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    .82rem !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;

  text-decoration:
    none !important;

  box-shadow:
    none !important;

  overflow:
    hidden !important;
}


/* ---------------------------------------------------------
   PREMIUM EMBLEM STANDARD
   --------------------------------------------------------- */

#brochurePrimaryAction::before,
#brochureSecondaryAction::before,
#brochureDownloadAction::before {
  content:
    "";

  position:
    absolute;

  left:
    10px;

  top:
    50%;

  width:
    46px;

  height:
    46px;

  transform:
    translateY(-50%);

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    contain;

  pointer-events:
    none;

  filter:
    drop-shadow(
      0 3px 6px rgba(0,0,0,.24)
    );
}


/* Design Your Door */

#brochurePrimaryAction::before {
  background-image:
    url("assets/ui/design-door-action.png");
}


/* Request a Quote */

#brochureSecondaryAction::before {
  background-image:
    url("assets/door-designer/final-actions/get-quote.png");
}


/* Download PDF */

#brochureDownloadAction::before {
  background-image:
    url("assets/ui/download-pdf-action.png");
}


/* ---------------------------------------------------------
   PRESERVE EXISTING BUTTON HIERARCHY
   --------------------------------------------------------- */

#brochurePrimaryAction {
  border:
    1px solid rgba(216,180,102,.82) !important;

  background:
    linear-gradient(
      180deg,
      rgba(25,67,96,.98),
      rgba(13,39,58,.98)
    ) !important;

  color:
    #ffffff !important;
}


#brochureSecondaryAction,
#brochureDownloadAction {
  border:
    1px solid rgba(125,166,192,.42) !important;

  background:
    rgba(20,59,86,.78) !important;

  color:
    #ffffff !important;
}


#brochurePrimaryAction:hover,
#brochurePrimaryAction:focus {
  border-color:
    #F5D78E !important;

  background:
    #173f5c !important;
}


#brochureSecondaryAction:hover,
#brochureSecondaryAction:focus,
#brochureDownloadAction:hover,
#brochureDownloadAction:focus {
  border-color:
    rgba(216,180,102,.68) !important;

  background:
    rgba(23,63,92,.92) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

  #brochurePrimaryAction,
  #brochureSecondaryAction,
  #brochureDownloadAction {
    width:
      100% !important;

    min-height:
      62px !important;

    padding:
      10px 16px 10px 60px !important;
  }

  #brochurePrimaryAction::before,
  #brochureSecondaryAction::before,
  #brochureDownloadAction::before {
    left:
      9px;

    width:
      42px;

    height:
      42px;
  }
}

/* 2026-10-06 PILKINGTON ACTION FLOW
   =========================================================
   Glass brochure:
     1. Arrange a Free Home Visit — quote/home-visit emblem
     2. Download PDF             — download emblem
     3. Back to Doors            — no emblem

   Other brochure action layouts are untouched.
   ========================================================= */


/* Keep the row visually balanced. */

.brochure-bottom-cta-pilkington
.brochure-bottom-actions {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    10px !important;
}


/* ---------------------------------------------------------
   1. ARRANGE A FREE HOME VISIT
   Use the existing quote / enquiry emblem rather than the
   Design Your Door emblem used by Universal.
   --------------------------------------------------------- */

.brochure-bottom-cta-pilkington
#brochurePrimaryAction {
  order:
    1;
}


.brochure-bottom-cta-pilkington
#brochurePrimaryAction::before {
  content:
    "" !important;

  display:
    block !important;

  background-image:
    url("assets/door-designer/final-actions/get-quote.png")
    !important;
}


/* ---------------------------------------------------------
   2. DOWNLOAD PDF
   --------------------------------------------------------- */

.brochure-bottom-cta-pilkington
#brochureDownloadAction {
  order:
    2;
}


/* ---------------------------------------------------------
   3. BACK TO DOORS
   Deliberately no emblem: this is a navigation fallback,
   not a quote/action feature.
   --------------------------------------------------------- */

.brochure-bottom-cta-pilkington
#brochureSecondaryAction {
  order:
    3;

  min-height:
    66px !important;

  padding:
    11px 20px !important;

  border:
    1px solid rgba(125,166,192,.34) !important;

  background:
    rgba(8,31,48,.38) !important;

  color:
    #b8c8d3 !important;

  box-shadow:
    none !important;
}


.brochure-bottom-cta-pilkington
#brochureSecondaryAction::before {
  content:
    none !important;

  display:
    none !important;

  background-image:
    none !important;
}


.brochure-bottom-cta-pilkington
#brochureSecondaryAction:hover,
.brochure-bottom-cta-pilkington
#brochureSecondaryAction:focus {
  border-color:
    rgba(216,180,102,.52) !important;

  background:
    rgba(20,59,86,.66) !important;

  color:
    #ffffff !important;
}


/* ---------------------------------------------------------
   MOBILE
   Preserve the same logical order when stacked.
   --------------------------------------------------------- */

@media (max-width: 700px) {

  .brochure-bottom-cta-pilkington
  .brochure-bottom-actions {
    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      8px !important;
  }

  .brochure-bottom-cta-pilkington
  #brochurePrimaryAction,
  .brochure-bottom-cta-pilkington
  #brochureDownloadAction,
  .brochure-bottom-cta-pilkington
  #brochureSecondaryAction {
    width:
      100% !important;
  }

  .brochure-bottom-cta-pilkington
  #brochureSecondaryAction {
    min-height:
      50px !important;

    padding:
      10px 16px !important;
  }
}

/* 2026-10-07 MOBILE BROCHURE HEADER FIT */
@media (max-width: 640px) {
  .brochure-page .brochure-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 14px 16px 16px;
    box-sizing: border-box;
    justify-items: center;
  }

  .brochure-page .brochure-brand {
    width: min(210px, 100%);
    max-width: 100%;
    align-items: center;
  }

  .brochure-page .brochure-brand img {
    width: 100% !important;
    max-width: 210px !important;
    height: auto !important;
    max-height: 70px !important;
    object-position: center;
  }

  .brochure-page .brochure-brand-tagline {
    width: auto;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    font-size: 7px;
    line-height: 1.4;
    letter-spacing: .10em;
    white-space: normal;
    text-align: center;
  }

  .brochure-page .brochure-header-title {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 4px;
    text-align: center;
  }

  .brochure-page .brochure-header-title span {
    font-size: .65rem;
    line-height: 1.4;
    letter-spacing: .12em;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .brochure-page .brochure-header-title strong {
    font-size: 1.1rem;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
  }

  .brochure-page .brochure-nav {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  .brochure-page .brochure-nav .brochure-header-cta {
    width: min(100%, 300px);
    max-width: 100%;
    min-height: 44px !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    font-size: .75rem !important;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
  }
}

/* 2026-10-07 MOBILE BROCHURE SITE MENU */
.brochure-site-menu {
  display: none;
}
@media (max-width: 640px) {
  .brochure-page .brochure-header {
    position: relative;
  }
  .brochure-page .brochure-site-menu {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .brochure-page .brochure-site-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(216,180,102,.65);
    border-radius: 5px;
    background: #12344d;
    color: #F5D78E;
    font-size: 1.5rem;
    line-height: 1;
    list-style: none;
    cursor: pointer;
  }
  .brochure-page .brochure-site-menu > summary::after {
    display: none;
  }
  .brochure-page .brochure-site-menu > summary::-webkit-details-marker {
    display: none;
  }
  .brochure-page .brochure-site-menu > summary:focus-visible,
  .brochure-page .brochure-site-menu a:focus-visible {
    outline: 2px solid #F5D78E;
    outline-offset: 3px;
  }
  .brochure-page .brochure-site-menu nav {
    position: absolute;
    top: 52px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(310px, calc(100vw - 32px));
    max-height: calc(100svh - 90px);
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid rgba(125,166,192,.30);
    border-radius: 6px;
    background: linear-gradient(180deg,#173f5c,#12344d);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
  }
  .brochure-page .brochure-site-menu:not([open]) nav {
    display: none;
  }
  .brochure-page .brochure-site-menu nav a,
  .brochure-page .brochure-menu-unavailable {
    display: block;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .86rem;
    line-height: 1.4;
    text-decoration: none;
  }
  .brochure-page .brochure-site-menu nav a:hover {
    background: rgba(255,255,255,.08);
    color: #F5D78E;
  }
  .brochure-page .brochure-menu-unavailable {
    color: #b8c8d3;
  }
  .brochure-page .brochure-site-menu .brochure-menu-visit {
    margin-top: 6px;
    border: 1px solid rgba(216,180,102,.82);
    background: rgba(8,31,48,.44);
  }
  /* Reserve space for the burger beside the centred logo. */
  .brochure-page .brochure-brand {
    width: min(190px, calc(100% - 100px));
  }
}