:root{

  --navy:#10283b;

  --navy-deep:#0b1c2b;

  --text:#17202a;

  --muted:#6d7783;

  --red:#cc0d18;

  --border:#e0e4e8;

  --page:#edf1f5;

  --card:#ffffff;

  --shadow:0 22px 60px rgba(22,37,55,.18);

}



*{

  box-sizing:border-box;

}



html,

body{

  margin:0;

  min-height:100%;

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

  color:var(--text);

  background:var(--page);

}



body{

  min-height:100vh;

}



button,

input{

  font:inherit;

}



.page-shell{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:28px;

}



.suite-canvas{

  position:relative;

  width:min(1480px, 96vw);

  height:min(900px, 92vh);

  min-height:680px;

  overflow:hidden;

  border-radius:20px;

  background:#f7f9fb;

  box-shadow:var(--shadow);

}



.background-layer{

  position:absolute;

  inset:0;

  background:

    linear-gradient(

      90deg,

      #142c40 0%,

      #1a374d 32%,

      #e6edf3 68%,

      #f7f9fb 100%

    );

  background-size:cover;

  background-position:center;

}



.background-layer.has-image{

  background-size:cover;

  background-position:center;

}



.background-overlay{

  position:absolute;

  inset:0;

  background:

    linear-gradient(

      90deg,

      rgba(8,25,39,.73) 0%,

      rgba(8,25,39,.55) 32%,

      rgba(255,255,255,.18) 55%,

      rgba(255,255,255,.76) 100%

    );

}



.brand-panel{

  position:absolute;

  top:58px;

  left:62px;

  width:370px;

  color:#fff;

  z-index:3;

}



.brand-mark{

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

  font-size:92px;

  line-height:.85;

  letter-spacing:-5px;

}



.brand-name{

  margin-top:14px;

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

  font-size:43px;

  line-height:.98;

}



.brand-name span{

  display:inline-block;

}



.brand-line{

  width:95px;

  height:3px;

  margin:17px 0;

  background:var(--red);

}



.brand-line.small{

  width:68px;

  margin-top:18px;

}



.suite-name{

  font-size:15px;

  line-height:1.8;

  letter-spacing:4px;

  font-weight:500;

}



.brand-message{

  margin-top:82px;

  font-size:15px;

  line-height:1.7;

  letter-spacing:3px;

}





.login-panel{

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  width:58%;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:60px 70px 170px;

  z-index:3;

}



.login-card{

  width:min(500px, 100%);

  padding:42px 44px;

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

  border:1px solid rgba(210,216,222,.95);

  border-radius:15px;

  box-shadow:0 20px 55px rgba(30,47,66,.16);

}



.login-heading{

  margin-bottom:30px;

}



.eyebrow{

  margin-bottom:8px;

  font-size:13px;

  letter-spacing:4px;

  color:#5f6974;

}



.login-heading h1{

  margin:0;

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

  font-size:45px;

  font-weight:500;

  color:#121a22;

}



.login-heading p{

  margin:11px 0 0;

  color:var(--muted);

  font-size:15px;

}



form label{

  display:block;

  margin:18px 0 8px;

  font-size:14px;

  font-weight:600;

}



input[type=email],

input[type=password],

input[type=text]{

  width:100%;

  height:50px;

  padding:0 14px;

  border:1px solid #cfd6dd;

  border-radius:8px;

  outline:none;

  background:#fff;

  transition:.15s ease;

}



input:focus{

  border-color:#8aa8bf;

  box-shadow:0 0 0 3px rgba(71,125,163,.12);

}



.password-wrap{

  position:relative;

}



.password-wrap input{

  padding-right:75px;

}



.show-password{

  position:absolute;

  top:50%;

  right:12px;

  transform:translateY(-50%);

  border:0;

  background:transparent;

  color:#66717b;

  cursor:pointer;

  font-size:13px;

}



.login-options{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  margin:18px 0 24px;

}



.remember{

  display:flex;

  align-items:center;

  gap:8px;

  margin:0;

  font-weight:400;

  color:#3d4750;

}



.remember input{

  width:16px;

  height:16px;

}



.forgot-password{

  padding:0;

  border:0;

  background:transparent;

  color:var(--red);

  cursor:pointer;

  font-size:13px;

}



.sign-in-button{

  width:100%;

  height:52px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  border:0;

  border-radius:7px;

  color:#fff;

  background:var(--red);

  font-size:16px;

  cursor:pointer;

  transition:.15s ease;

}



.sign-in-button:hover{

  filter:brightness(.96);

}



.login-message{

  min-height:18px;

  margin-top:12px;

  color:#b50b13;

  font-size:13px;

}





.module-strip{

  position:absolute;

  left:50%;

  bottom:32px;

  transform:translateX(-50%);

  width:calc(100% - 90px);

  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:12px;

  z-index:4;

  pointer-events:none;

}



.module-card{

  min-width:0;

  min-height:102px;

  display:flex;

  align-items:center;

  gap:12px;

  padding:14px 16px;

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

  border-radius:12px;

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

  box-shadow:0 6px 18px rgba(37,51,67,.08);

}



.logo-box{

  flex:0 0 54px;

  width:54px;

  height:54px;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

}



.logo-box img{

  max-width:100%;

  max-height:100%;

  object-fit:contain;

}



.cardinal-box img{

  width:50px;

  height:58px;

  object-fit:cover;

  object-position:center;

}



.module-icon{

  flex:0 0 52px;

  width:52px;

  height:52px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:12px;

  font-size:31px;

  font-weight:700;

}



.scheduling{

  background:#eaf7f0;

  color:#59a77a;

}



.analytics{

  background:#f1ebfa;

  color:#8e63bd;

}



.manager{

  background:#eef0f2;

  color:#7a838e;

}



.module-copy{

  min-width:0;

}



.module-copy strong{

  display:block;

  margin-bottom:6px;

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

  font-size:20px;

  font-weight:500;

}



.module-copy span{

  display:block;

  color:#7b8490;

  font-size:11px;

  line-height:1.35;

  text-transform:uppercase;

  letter-spacing:.8px;

}





@media (max-width:1100px){



  .suite-canvas{

    height:auto;

    min-height:900px;

  }



  .brand-panel{

    width:320px;

    left:40px;

  }



  .login-panel{

    width:60%;

    padding-left:45px;

    padding-right:45px;

  }



  .module-strip{

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

  }



  .module-card{

    padding:12px 10px;

    gap:8px;

  }



  .module-copy strong{

    font-size:17px;

  }



}





@media (max-width:800px){



  .page-shell{

    padding:0;

  }



  .suite-canvas{

    width:100%;

    min-height:100vh;

    height:auto;

    border-radius:0;

  }



  .brand-panel{

    position:relative;

    top:auto;

    left:auto;

    width:auto;

    padding:38px 32px 20px;

  }



  .brand-message{

    display:none;

  }



  .login-panel{

    position:relative;

    width:100%;

    padding:20px 24px 30px;

  }



  .login-card{

    padding:30px 24px;

  }



  .module-strip{

    position:relative;

    left:auto;

    bottom:auto;

    transform:none;

    width:auto;

    grid-template-columns:1fr;

    margin:0 24px 30px;

  }



  .module-card{

    min-height:78px;

  }



}




/* --- Suite blueprint treatment --- */



.suite-canvas::after{

  content:"";

  position:absolute;

  inset:0 0 0 42%;

  z-index:2;

  pointer-events:none;



  background-image:

    linear-gradient(rgba(34,84,120,.10) 1px, transparent 1px),

    linear-gradient(90deg, rgba(34,84,120,.10) 1px, transparent 1px),

    linear-gradient(rgba(34,84,120,.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(34,84,120,.05) 1px, transparent 1px);



  background-size:

    36px 36px,

    36px 36px,

    9px 9px,

    9px 9px;



  opacity:.72;



  mask-image:linear-gradient(

    90deg,

    transparent 0%,

    rgba(0,0,0,.35) 15%,

    rgba(0,0,0,.82) 42%,

    #000 100%

  );

}



/* stronger fade from photography into the blueprint side */

.background-overlay{

  background:

    linear-gradient(

      90deg,

      rgba(8,25,39,.78) 0%,

      rgba(8,25,39,.62) 28%,

      rgba(255,255,255,.18) 48%,

      rgba(240,246,250,.76) 68%,

      rgba(247,249,251,.94) 100%

    );

}






/* =========================================================

   HD SUITE - ARCHITECTURAL PLAN OVERLAY

   Replaces the earlier square-grid blueprint treatment

   ========================================================= */



.suite-canvas::after{

  content:"";

  position:absolute;

  inset:0 0 0 38%;

  z-index:2;

  pointer-events:none;



  background-image:

    /* diagonal sheet edge */

    linear-gradient(

      32deg,

      transparent 0 43%,

      rgba(65,105,135,.13) 43.2% 43.6%,

      transparent 43.8% 100%

    ),



    /* second overlapping sheet edge */

    linear-gradient(

      145deg,

      transparent 0 55%,

      rgba(65,105,135,.11) 55.2% 55.6%,

      transparent 55.8% 100%

    ),



    /* long architectural wall lines */

    linear-gradient(

      78deg,

      transparent 0 21%,

      rgba(64,105,137,.13) 21.2% 21.5%,

      transparent 21.7% 46%,

      rgba(64,105,137,.10) 46.2% 46.5%,

      transparent 46.7% 100%

    ),



    /* horizontal plan lines */

    linear-gradient(

      8deg,

      transparent 0 31%,

      rgba(64,105,137,.12) 31.2% 31.5%,

      transparent 31.7% 61%,

      rgba(64,105,137,.10) 61.2% 61.5%,

      transparent 61.7% 100%

    ),



    /* fine drawing linework */

    repeating-linear-gradient(

      17deg,

      transparent 0 54px,

      rgba(75,116,146,.055) 55px,

      transparent 56px 108px

    ),



    repeating-linear-gradient(

      103deg,

      transparent 0 72px,

      rgba(75,116,146,.05) 73px,

      transparent 74px 142px

    );



  background-color:rgba(244,248,251,.20);



  opacity:.95;



  -webkit-mask-image:linear-gradient(

    90deg,

    transparent 0%,

    rgba(0,0,0,.18) 8%,

    rgba(0,0,0,.68) 27%,

    #000 58%,

    #000 100%

  );



  mask-image:linear-gradient(

    90deg,

    transparent 0%,

    rgba(0,0,0,.18) 8%,

    rgba(0,0,0,.68) 27%,

    #000 58%,

    #000 100%

  );

}





/* Create the pale "plan sheet" region seen in the approved concept */

.background-overlay{

  background:

    linear-gradient(

      90deg,

      rgba(7,24,38,.78) 0%,

      rgba(7,24,38,.61) 27%,

      rgba(33,57,73,.30) 40%,

      rgba(235,242,247,.58) 55%,

      rgba(245,248,251,.88) 73%,

      rgba(249,250,252,.97) 100%

    );

}






/* =========================================================

   HD SUITE - APPROVED PLAN SHEET TREATMENT

   Kitchen photography left -> architectural plans right

   ========================================================= */



.suite-canvas::before{

  content:"";

  position:absolute;

  top:-5%;

  right:-3%;

  width:66%;

  height:112%;

  z-index:2;

  pointer-events:none;



  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke='%236b8ca5' stroke-opacity='.28'%3E%3Crect x='82' y='62' width='690' height='510' stroke-width='2'/%3E%3Crect x='118' y='100' width='245' height='180' stroke-width='3'/%3E%3Crect x='363' y='100' width='310' height='180' stroke-width='3'/%3E%3Crect x='118' y='280' width='190' height='220' stroke-width='3'/%3E%3Crect x='308' y='280' width='365' height='220' stroke-width='3'/%3E%3Cpath d='M363 100v180 M308 280v220 M118 390h190 M500 280v220' stroke-width='2'/%3E%3Cpath d='M140 125h175v42H140z M390 125h230v40H390z M340 315h135v42H340z M520 315h115v120H520z' stroke-width='2'/%3E%3Cpath d='M280 280a70 70 0 0 1-70 70 M500 280a70 70 0 0 0 70 70' stroke-width='2'/%3E%3Cpath d='M82 38h690 M82 30v16 M772 30v16 M98 585h650 M98 578v15 M748 578v15' stroke-width='1.3'/%3E%3Cpath d='M105 84h580 M105 84v10 M685 84v10 M105 520h580 M105 510v10 M685 510v10' stroke-width='1'/%3E%3C/g%3E%3Cg fill='%236b8ca5' fill-opacity='.36' font-family='Arial' font-size='12'%3E%3Ctext x='380' y='27'%3E22'-6%22%3C/text%3E%3Ctext x='392' y='604'%3E20'-0%22%3C/text%3E%3Ctext x='175' y='205'%3EKITCHEN%3C/text%3E%3Ctext x='460' y='205'%3EDINING%3C/text%3E%3Ctext x='165' y='415'%3EPANTRY%3C/text%3E%3Ctext x='410' y='415'%3ELIVING%3C/text%3E%3Ctext x='620' y='555'%3EA-2.1%3C/text%3E%3C/g%3E%3C/svg%3E");



  background-size:94% 94%;

  background-repeat:no-repeat;

  background-position:center;



  transform:rotate(-5deg);

  transform-origin:center;



  opacity:.82;



  -webkit-mask-image:linear-gradient(

    90deg,

    transparent 0%,

    rgba(0,0,0,.14) 12%,

    rgba(0,0,0,.62) 32%,

    #000 62%

  );



  mask-image:linear-gradient(

    90deg,

    transparent 0%,

    rgba(0,0,0,.14) 12%,

    rgba(0,0,0,.62) 32%,

    #000 62%

  );

}





/* Second translucent sheet underneath */

.suite-canvas::after{

  content:"";

  position:absolute;

  top:-14%;

  right:8%;

  width:58%;

  height:108%;

  z-index:2;

  pointer-events:none;



  border:1px solid rgba(79,117,146,.12);



  background-image:

    linear-gradient(72deg,

      transparent 0 24%,

      rgba(78,116,145,.09) 24.2% 24.5%,

      transparent 24.7% 63%,

      rgba(78,116,145,.08) 63.2% 63.5%,

      transparent 63.7% 100%

    ),

    linear-gradient(7deg,

      transparent 0 36%,

      rgba(78,116,145,.10) 36.2% 36.5%,

      transparent 36.7% 69%,

      rgba(78,116,145,.08) 69.2% 69.5%,

      transparent 69.7% 100%

    );



  background-color:rgba(250,252,253,.18);



  transform:rotate(7deg);

  opacity:.62;



  -webkit-mask-image:linear-gradient(

    90deg,

    transparent,

    rgba(0,0,0,.35) 28%,

    #000 70%

  );



  mask-image:linear-gradient(

    90deg,

    transparent,

    rgba(0,0,0,.35) 28%,

    #000 70%

  );

}





/* Photo-to-plan fade */

.background-overlay{

  z-index:1;



  background:

    linear-gradient(

      90deg,

      rgba(7,24,38,.80) 0%,

      rgba(7,24,38,.64) 25%,

      rgba(18,40,55,.42) 37%,

      rgba(217,228,236,.47) 51%,

      rgba(241,246,249,.78) 67%,

      rgba(249,251,252,.96) 100%

    );

}





/* Keep interface content above the plan artwork */

.brand-panel,

.login-panel,

.module-strip{

  z-index:4;

}






/* =========================================================

   PLAN VISIBILITY TUNING

   Stronger architectural linework like approved mockup

   ========================================================= */



.suite-canvas::before{

  opacity:1;



  filter:

    contrast(1.8)

    saturate(1.25);



  -webkit-mask-image:linear-gradient(

    90deg,

    transparent 0%,

    rgba(0,0,0,.30) 8%,

    rgba(0,0,0,.85) 27%,

    #000 45%,

    #000 100%

  );



  mask-image:linear-gradient(

    90deg,

    transparent 0%,

    rgba(0,0,0,.30) 8%,

    rgba(0,0,0,.85) 27%,

    #000 45%,

    #000 100%

  );

}



.suite-canvas::after{

  opacity:.90;

  border-color:rgba(52,96,132,.25);

}



/* Keep the transition light, but stop bleaching the drawings */

.background-overlay{

  background:

    linear-gradient(

      90deg,

      rgba(7,24,38,.80) 0%,

      rgba(7,24,38,.63) 25%,

      rgba(18,40,55,.34) 38%,

      rgba(220,231,239,.30) 52%,

      rgba(240,246,249,.56) 68%,

      rgba(248,250,252,.76) 100%

    );

}








/* =========================================================

   APPLICATION SELECTION

   ========================================================= */



.selection-canvas{

  position:relative;

}



.selection-user{

  position:absolute;

  top:38px;

  right:45px;

  z-index:5;



  display:flex;

  align-items:center;

  gap:18px;



  padding:8px 12px;



  color:#45515d;

}



.selection-user-copy{

  text-align:right;

}



.selection-user-copy strong{

  display:block;

  font-size:13px;

  font-weight:600;

}



.selection-user-copy span{

  display:block;

  margin-top:2px;



  color:#7c8791;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.7px;

}



.selection-signout{

  border:0;

  background:transparent;

  color:#8b949d;



  font-size:12px;

  cursor:pointer;

}



.selection-signout:hover{

  color:#cc0d18;

}





.selection-main{

  position:absolute;

  top:0;

  right:0;

  bottom:0;



  width:72%;



  z-index:4;



  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;



  padding:60px 42px 80px;

}



.selection-heading{

  text-align:center;

  margin-bottom:40px;

}



.selection-heading h1{

  margin:4px 0 8px;



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

  font-size:42px;

  font-weight:500;



  color:#17202a;

}



.selection-heading p{

  margin:0;

  color:#68747f;

  font-size:14px;

}





.application-grid{

  width:min(850px, 100%);



  display:grid;

  grid-template-columns:repeat(5, 1fr);



  gap:9px;

}





.application-card{

  position:relative;



  min-width:0;

  height:220px;



  border:1px solid #dce2e7;

  border-radius:10px;



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



  box-shadow:

    0 7px 20px rgba(31,47,62,.09);



  display:flex;

  flex-direction:column;

  align-items:center;



  padding:23px 10px 18px;



  font-family:inherit;

}





button.application-card{

  cursor:pointer;

}





.application-active{

  transition:

    transform .15s ease,

    box-shadow .15s ease,

    border-color .15s ease;

}



.application-active:hover{

  transform:translateY(-3px);



  border-color:#b8c8d5;



  box-shadow:

    0 13px 28px rgba(31,47,62,.16);

}





.application-logo{

  width:62px;

  height:62px;



  display:flex;

  align-items:center;

  justify-content:center;



  margin-bottom:7px;

}



.application-logo img{

  max-width:100%;

  max-height:100%;



  object-fit:contain;

}





.application-symbol{

  width:58px;

  height:58px;



  display:flex;

  align-items:center;

  justify-content:center;



  border-radius:11px;



  margin:2px 0 9px;



  font-size:34px;

}





.application-name{

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

  font-size:18px;



  color:#19242d;



  margin-bottom:7px;

}





.application-description{

  min-height:37px;



  text-align:center;



  color:#77828c;



  font-size:9px;

  line-height:1.35;



  text-transform:uppercase;

  letter-spacing:.7px;

}





.application-arrow{

  margin-top:auto;



  width:27px;

  height:27px;



  display:flex;

  align-items:center;

  justify-content:center;



  border-radius:50%;



  background:#eef3f6;



  color:#8ca1b1;



  font-size:16px;

}





.application-active .application-arrow{

  background:#e5f4ff;

  color:#278bc9;

}





.application-disabled{

  opacity:.52;

  filter:saturate(.58);



  cursor:not-allowed;



  box-shadow:

    0 4px 14px rgba(31,47,62,.055);

}





/* Selection screen needs more visual room on left */

.selection-brand{

  width:300px;

}





/* Responsive */

@media (max-width:1100px){



  .selection-main{

    width:74%;

    padding-left:28px;

    padding-right:28px;

  }



  .application-grid{

    gap:7px;

  }



  .application-card{

    height:200px;

  }



}





@media (max-width:800px){



  .selection-user{

    top:16px;

    right:16px;

  }



  .selection-main{

    position:relative;



    width:100%;



    padding:

      35px 20px

      40px;

  }



  .selection-heading{

    margin-bottom:24px;

  }



  .application-grid{

    grid-template-columns:1fr;

  }



  .application-card{

    height:auto;

    min-height:120px;

  }



}




/* LOCKED: unauthorized applications stay visually present */

.application-disabled {

  opacity: 1;

  filter: none;

  cursor: default;

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

  box-shadow: 0 7px 20px rgba(31,47,62,.09);

}



.application-disabled .application-arrow {

  opacity: .35;

}






/* LOCKED: Selection screen text must remain readable over all backgrounds */



.selection-heading .eyebrow {

  color: #33414d;

  font-weight: 700;

  letter-spacing: 4px;

}



.selection-heading p {

  color: #3d4a55;

  font-weight: 600;

}



.selection-user-copy strong {

  color: #26343f;

  font-weight: 700;

}



.selection-user-copy span {

  color: #46545f;

  font-weight: 600;

}



.selection-signout {

  color: #46545f;

  font-weight: 600;

}



.selection-signout:hover {

  color: #cc0d18;

}