/* /public/assets/css/gate-designer.css */
/* ENTREX Gate Designer V3.9.21 */

.designer-page{
  position:relative;
}

.designer-page-head{
  max-width:820px;
  margin-bottom:26px;
}

.designer-page-head .lead{
  max-width:760px;
}

.designer-shell{
  position:relative;
}

.gd-app{
  position:relative;
}

.gd-header{
  margin-bottom:20px;
}

.gd-header-copy{
  max-width:780px;
}

.gd-title{
  margin:4px 0 0;
  font-size:clamp(1.55rem, 3vw, 2.2rem);
  line-height:1.1;
}

.gd-subtitle{
  margin:8px 0 0;
  max-width:720px;
  color:var(--muted);
}

.gd-notice{
  margin-top:14px;
  padding:11px 14px;
  max-width:max-content;
  border:1px solid rgba(213,180,108,.28);
  border-radius:13px;
  background:rgba(213,180,108,.10);
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:.88rem;
}

/* Progress */
.gd-progress{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-bottom:24px;
}

.gd-progress-item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.48);
  font-size:.76rem;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
}

.gd-progress-item > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}

.gd-progress-dot{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  font-size:.68rem;
}

.gd-progress-item.is-active{
  color:#f1d58b;
  border-color:rgba(213,180,108,.30);
  background:rgba(213,180,108,.08);
}

.gd-progress-item.is-active .gd-progress-dot,
.gd-progress-item.is-complete .gd-progress-dot{
  background:#d5b46c;
  color:#11151a;
}

.gd-progress-item.is-complete{
  color:rgba(255,255,255,.70);
}

/* Main layout */
.gd-layout{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:24px;
  align-items:start;
}

.gd-preview-column{
  min-width:0;
  position:sticky;
  top:92px;
}

.gd-controls-column{
  min-width:0;
}

.gd-panel{
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:
    radial-gradient(700px 250px at 15% 0%, rgba(213,180,108,.10), transparent 58%),
    linear-gradient(180deg, rgba(18,25,35,.88), rgba(10,15,22,.80));
  box-shadow:0 22px 58px rgba(0,0,0,.28);
}

.gd-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.gd-panel-title{
  font-weight:900;
  font-size:1rem;
}

.gd-panel-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.5;
}

.gd-preview-code{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(213,180,108,.24);
  border-radius:999px;
  color:#dfc47c;
  background:rgba(213,180,108,.08);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.05em;
}

.gd-preview-frame{
  margin-top:15px;
  overflow:hidden;
  aspect-ratio:20/13;
  min-height:330px;
  border:1px solid #cfd3d6;
  border-radius:12px;
  background:#f7f7f4;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}

.gd-preview-frame svg{
  display:block;
  width:100%;
  height:100%;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}

.gd-preview-frame .gd-cad-gate{
  vector-effect:non-scaling-stroke;
}

.gd-preview-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}

.gd-preview-tags span{
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.64);
  font-size:.73rem;
}

/* Option cards */
.gd-option-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

.gd-option{
  position:relative;
  width:100%;
  min-height:126px;
  padding:19px;
  text-align:left;
  cursor:pointer;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  box-shadow:0 14px 32px rgba(0,0,0,.18);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.gd-option:hover{
  transform:translateY(-2px);
  border-color:rgba(213,180,108,.34);
  background:linear-gradient(180deg,rgba(213,180,108,.08),rgba(255,255,255,.022));
}

.gd-option.is-selected{
  border-color:rgba(213,180,108,.50);
  box-shadow:inset 0 0 0 1px rgba(213,180,108,.14),0 14px 34px rgba(0,0,0,.20);
}

.gd-option strong{
  display:block;
  padding-right:28px;
  font-size:.98rem;
  color:rgba(255,255,255,.96);
}

.gd-option > span:not(.gd-option-mark){
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.57);
  font-size:.84rem;
  line-height:1.48;
}

.gd-option-mark{
  position:absolute;
  top:15px;
  right:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  color:#11151a;
  background:transparent;
  font-size:.76rem;
  font-weight:900;
}

.gd-option.is-selected .gd-option-mark{
  background:#d5b46c;
}

/* Style cards */
.gd-style-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

.gd-style-card{
  overflow:hidden;
  padding:0;
  cursor:pointer;
  text-align:left;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
  transition:transform .18s ease,border-color .18s ease;
}

.gd-style-card:hover{
  transform:translateY(-2px);
  border-color:rgba(213,180,108,.34);
}

.gd-style-card.is-selected{
  border-color:rgba(213,180,108,.54);
}

.gd-style-visual{
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#f7f7f4;
}

.gd-style-visual svg{
  display:block;
  width:100%;
  height:100%;
}

.gd-style-copy{
  display:block;
  padding:14px;
}

.gd-style-code{
  display:block;
  margin-bottom:5px;
  color:#d5b46c;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.gd-style-copy strong{
  display:block;
  color:rgba(255,255,255,.96);
  font-size:.92rem;
}

.gd-style-copy > span:last-child{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.55);
  font-size:.78rem;
  line-height:1.45;
}

/* Dimensions */
.gd-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.gd-form-group{
  margin-bottom:12px;
}

.gd-label{
  display:block;
  margin-bottom:7px;
  font-size:.87rem;
  font-weight:900;
}

.gd-input{
  width:100%;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:13px;
  outline:none;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font:inherit;
}

.gd-input:focus{
  border-color:rgba(213,180,108,.46);
  box-shadow:0 0 0 4px rgba(213,180,108,.07);
}

.gd-input:disabled{
  opacity:.46;
}

.gd-input::placeholder{
  color:rgba(255,255,255,.34);
}

.gd-help{
  margin-top:7px;
  color:var(--muted);
  font-size:.77rem;
  line-height:1.45;
}

.gd-check-row{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-top:6px;
  padding:14px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.022);
}

.gd-check-row input{
  margin-top:3px;
  accent-color:#d5b46c;
}

.gd-check-row strong,
.gd-check-row small{
  display:block;
}

.gd-check-row small{
  margin-top:3px;
  color:var(--muted);
}

/* Finishes */
.gd-finish-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.gd-finish{
  display:flex;
  gap:13px;
  align-items:center;
  padding:14px;
  cursor:pointer;
  text-align:left;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.gd-finish:hover,
.gd-finish.is-selected{
  border-color:rgba(213,180,108,.40);
}

.gd-swatch{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:var(--swatch);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}

.gd-finish strong,
.gd-finish small{
  display:block;
}

.gd-finish small{
  margin-top:3px;
  color:var(--muted);
  font-size:.73rem;
}

.gd-inline-panel{
  margin-top:14px;
}

/* Actions */
.gd-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:17px;
}

.gd-actions-right{
  justify-content:flex-end;
}

.gd-footer{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:17px;
}

.gd-footer .btn[disabled]{
  opacity:.38;
  cursor:not-allowed;
}

.gd-reset-link{
  margin-left:auto;
  padding:8px 0;
  cursor:pointer;
  color:rgba(255,255,255,.45);
  border:0;
  background:transparent;
  font:inherit;
  font-size:.78rem;
}

.gd-reset-link:hover{
  color:#d5b46c;
}

/* Summary */
.gd-summary-layout{
  display:block;
}

.gd-summary-rows{
  margin-top:12px;
}

.gd-summary-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.065);
  font-size:.86rem;
}

.gd-summary-row:last-child{
  border-bottom:0;
}

.gd-summary-row span{
  color:var(--muted);
}

.gd-summary-row strong{
  max-width:62%;
  text-align:right;
  color:rgba(255,255,255,.94);
}

.gd-summary-actions .btn{
  flex:1 1 calc(50% - 10px);
  justify-content:center;
  text-align:center;
}

.gd-mini-note{
  margin-top:16px;
  padding:12px 13px;
  border:1px dashed rgba(255,255,255,.13);
  border-radius:13px;
  color:var(--muted);
  font-size:.77rem;
  line-height:1.5;
}

.designer-page > .container > .note{
  margin-top:18px;
}

@media (max-width:1050px){
  .gd-layout{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  }

  .gd-style-grid,
  .gd-option-grid{
    grid-template-columns:1fr;
  }

  .gd-preview-frame{
    min-height:290px;
  }
}

@media (max-width:860px){
  .gd-progress{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:3px;
  }

  .gd-progress::-webkit-scrollbar{
    display:none;
  }

  .gd-progress-item{
    flex:0 0 auto;
    min-width:max-content;
  }

  .gd-layout,
  .gd-layout.is-summary{
    grid-template-columns:1fr;
  }

  .gd-preview-column{
    position:static;
  }

  .gd-preview-frame{
    min-height:260px;
  }

  .gd-style-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .designer-page .container{
    padding-left:14px;
    padding-right:14px;
  }

  .designer-page-head{
    margin-bottom:20px;
  }

  .gd-header{
    margin-bottom:15px;
  }

  .gd-progress{
    margin-bottom:18px;
  }

  .gd-progress-item{
    padding:7px 9px;
  }

  .gd-panel{
    padding:17px;
    border-radius:18px;
  }

  .gd-preview-frame{
    min-height:215px;
    border-radius:14px;
  }

  .gd-style-grid,
  .gd-option-grid,
  .gd-finish-grid,
  .gd-form-grid{
    grid-template-columns:1fr;
  }

  .gd-option{
    min-height:0;
    padding:16px;
  }

  .gd-style-card{
    display:grid;
    grid-template-columns:42% 58%;
  }

  .gd-style-visual{
    aspect-ratio:auto;
    min-height:132px;
    border-right:1px solid rgba(255,255,255,.08);
    border-bottom:0;
  }

  .gd-style-copy{
    align-self:center;
    padding:12px;
  }

  .gd-summary-row{
    flex-direction:column;
    gap:4px;
  }

  .gd-summary-row strong{
    max-width:none;
    text-align:left;
  }

  .gd-summary-actions .btn,
  .gd-actions .btn{
    width:100%;
    flex:1 1 100%;
  }
}

@media (max-width:420px){
  .gd-style-card{
    grid-template-columns:1fr;
  }

  .gd-style-visual{
    min-height:150px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
}

.gd-style-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ================================
   V2.1 scaled preview refinements
================================ */

.gd-scale-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:9px 11px;
  border:1px solid rgba(213,180,108,.15);
  border-radius:12px;
  background:rgba(213,180,108,.045);
  font-size:.72rem;
}

.gd-scale-note span{
  color:#d9bd73;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.gd-scale-note strong{
  color:rgba(255,255,255,.68);
  font-weight:700;
  text-align:right;
}

.gd-scale-callout{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:4px 0 15px;
  padding:12px 13px;
  border:1px dashed rgba(213,180,108,.22);
  border-radius:14px;
  background:rgba(213,180,108,.04);
}

.gd-scale-callout strong{
  flex:0 0 auto;
  color:#dfc47c;
  font-size:.82rem;
}

.gd-scale-callout span{
  color:var(--muted);
  font-size:.8rem;
  line-height:1.45;
}

.gd-form-grid-three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width:900px){
  .gd-form-grid-three{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:620px){
  .gd-form-grid-three{
    grid-template-columns:1fr;
  }

  .gd-scale-note{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .gd-scale-note strong{
    text-align:left;
  }

  .gd-scale-callout{
    flex-direction:column;
    gap:4px;
  }
}


/* ================================
   V2.3 technical elevation preview
================================ */

.gd-preview-panel{
  background:linear-gradient(180deg,rgba(18,25,35,.90),rgba(10,15,22,.82));
}

.gd-preview-frame{
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.gd-preview-nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(9,14,20,.92);
}

.gd-preview-nav .gd-reset-link{
  justify-self:start;
  margin-left:0;
  padding:8px 6px;
}

.gd-preview-nav .gd-next-btn{
  min-width:108px;
}

.gd-preview-nav .btn[disabled]{
  opacity:.38;
  cursor:not-allowed;
}

.gd-scale-note{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
}

.gd-style-visual{
  background:#f7f7f4;
}

@media (max-width:900px){
  .gd-preview-column{
    position:static;
  }
}

@media (max-width:560px){
  .gd-preview-nav{
    grid-template-columns:auto 1fr auto;
  }

  .gd-preview-nav .btn{
    width:auto;
  }

  .gd-preview-nav .gd-next-btn{
    min-width:96px;
  }

  .gd-preview-nav .gd-reset-link{
    font-size:.72rem;
  }
}


/* ================================
   V2.5 technical drawing refinements
================================ */

.gd-preview-frame{
  border-color:#d7dbdd;
  background:#f7f7f4;
}

.gd-scale-note span{
  color:#dfc47c;
}

.gd-design-advisory{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(213,180,108,.18);
  border-radius:12px;
  background:rgba(213,180,108,.045);
}

.gd-design-advisory strong{
  flex:0 0 auto;
  color:#dfc47c;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.gd-design-advisory span{
  color:rgba(255,255,255,.68);
  font-size:.78rem;
  line-height:1.45;
}

@media (max-width:620px){
  .gd-design-advisory{
    flex-direction:column;
    gap:3px;
  }
}


/* ================================
   V3.0 development build indicator
================================ */
.designer-dev-row,
.gd-kicker-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.designer-build-badge,
.gd-version-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border:1px solid rgba(213,180,108,.30);
  border-radius:999px;
  background:rgba(213,180,108,.08);
  color:#dfc47c;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
}

.designer-build-badge{
  margin-bottom:2px;
}


/* ================================
   V3.4 front elevation + in-preview operation picker
================================ */
.gd-layout.is-preview-only{
  grid-template-columns:1fr;
}

.gd-layout.is-preview-only .gd-preview-column{
  position:static;
  max-width:none;
}

.gd-preview-panel.is-operation-picker .gd-preview-frame{
  min-height:390px;
}

.gd-svg-choice{
  cursor:pointer;
  outline:none;
}

.gd-svg-choice .gd-svg-choice-card{
  transition:fill .16s ease,stroke .16s ease,filter .16s ease;
}

.gd-svg-choice:hover .gd-svg-choice-card,
.gd-svg-choice:focus .gd-svg-choice-card{
  fill:#fffdf6;
  stroke:#b18b3b;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.08));
}

.gd-cad-gate-recessed{
  opacity:.985;
}

@media (max-width:620px){
  .gd-preview-panel.is-operation-picker .gd-preview-frame{
    min-height:320px;
  }
}


/* V3.8 true-scale model note */
.gd-scale-note small{
  flex:0 0 100%;
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.48);
  font-size:.68rem;
  font-weight:600;
  line-height:1.35;
}


/* ================================
   V3.9 technical drawing polish
================================ */
.gd-preview-frame svg{
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}

.gd-preview-frame .gd-cad-keypad,
.gd-preview-frame .gd-cad-underground-motors,
.gd-preview-frame .gd-cad-sliding-hardware{
  vector-effect:non-scaling-stroke;
}


/* ================================
   V3.9.14 desktop experience tidy-up
   Presentation only: gate geometry / mechanics are unchanged.
================================ */

/* Give the designer a little more usable width on larger screens. */
@media (min-width:1100px){
  .designer-page > .container{
    max-width:1320px;
  }

  .designer-page-head{
    max-width:760px;
    margin-bottom:20px;
  }

  .designer-page-head h1{
    margin-bottom:10px;
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.04;
  }

  .designer-page-head .lead{
    max-width:690px;
    margin-bottom:0;
    font-size:1rem;
    line-height:1.65;
  }

  /* Once the user is inside the flow, the in-app step title becomes the sole
     heading. This removes the repeated marketing hero from every desktop step. */
  .designer-page.is-designer-ready .designer-page-head{
    display:none;
  }

  .designer-page.is-designer-ready{
    padding-top:34px;
  }

  .gd-header{
    margin-bottom:18px;
  }

  .gd-header-copy{
    max-width:720px;
  }

  .gd-title{
    font-size:clamp(1.55rem,2.2vw,2rem);
  }

  .gd-subtitle{
    margin-top:6px;
    font-size:.92rem;
  }

  .gd-progress{
    gap:10px;
    margin-bottom:20px;
  }

  .gd-progress-item{
    justify-content:flex-start;
    min-height:42px;
    padding:8px 12px;
    background:rgba(255,255,255,.018);
  }

  .gd-progress-dot{
    width:20px;
    height:20px;
  }

  /* Review screen: give the drawing the visual priority. */
  .gd-layout.is-summary{
    grid-template-columns:minmax(0,1.42fr) minmax(360px,.78fr);
    gap:28px;
    align-items:start;
  }

  .gd-layout.is-summary .gd-preview-column{
    position:static;
  }

  .gd-layout.is-summary .gd-preview-panel{
    padding:20px;
  }

  .gd-layout.is-summary .gd-preview-frame{
    min-height:390px;
    margin-top:14px;
  }

  .gd-layout.is-summary .gd-preview-tags{
    display:none;
  }

  .gd-layout.is-summary .gd-scale-note{
    margin-top:12px;
  }

  .gd-layout.is-summary .gd-preview-nav{
    margin-top:10px;
    padding:8px 10px;
    background:rgba(9,14,20,.55);
  }

  .gd-layout.is-summary .gd-preview-nav .gd-reset-link{
    opacity:.75;
  }

  .gd-summary-panel{
    padding:20px;
    border-radius:20px;
    box-shadow:0 18px 44px rgba(0,0,0,.22);
  }

  .gd-summary-heading{
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.075);
  }

  .gd-summary-groups{
    display:grid;
    gap:18px;
    margin-top:16px;
  }

  .gd-summary-section{
    min-width:0;
  }

  .gd-summary-section-title{
    margin-bottom:4px;
    color:#dfc47c;
    font-size:.69rem;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
  }

  .gd-summary-section .gd-summary-rows{
    margin-top:0;
  }

  .gd-summary-row{
    padding:8px 0;
    gap:16px;
    font-size:.8rem;
  }

  .gd-summary-row strong{
    max-width:60%;
    line-height:1.35;
  }

  .gd-summary-actions{
    display:grid;
    gap:9px;
  }

  .gd-summary-actions-primary{
    grid-template-columns:1.25fr .75fr;
    margin-top:20px;
  }

  .gd-summary-actions-secondary{
    grid-template-columns:1fr 1fr;
    margin-top:9px;
  }

  .gd-summary-actions .btn{
    width:100%;
    min-height:42px;
    padding:10px 12px;
    font-size:.78rem;
  }

  .gd-summary-actions-secondary .btn{
    min-height:38px;
    color:rgba(255,255,255,.68);
    border-color:rgba(255,255,255,.075);
    background:rgba(255,255,255,.018);
  }

  .gd-mini-note{
    margin-top:14px;
    padding:10px 11px;
    font-size:.72rem;
    line-height:1.45;
    background:rgba(255,255,255,.012);
  }

  /* The summary panel already carries the survey note, so don't repeat another
     full-width disclaimer immediately below the tool. */
  .designer-page.is-review-page > .container > .note{
    display:none;
  }
}

/* The grouped summary remains clear on tablet/mobile without making the page
   feel materially different from the existing mobile workflow. */
.gd-summary-groups{
  display:grid;
  gap:16px;
}

.gd-summary-section-title{
  color:#dfc47c;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.gd-summary-actions-primary,
.gd-summary-actions-secondary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.gd-summary-actions-primary{
  margin-top:18px;
}

.gd-summary-actions-secondary{
  margin-top:10px;
}

@media (max-width:620px){
  .gd-summary-section-title{
    margin-top:2px;
  }

  .gd-summary-actions-primary,
  .gd-summary-actions-secondary{
    display:grid;
    grid-template-columns:1fr;
  }
}


@media (min-width:1100px){
  .gd-summary-groups{
    gap:18px;
  }

  .gd-summary-actions-primary,
  .gd-summary-actions-secondary{
    display:grid;
  }

  .gd-summary-actions-primary{
    grid-template-columns:1.25fr .75fr;
  }

  .gd-summary-actions-secondary{
    grid-template-columns:1fr 1fr;
  }
}

/* ================================
   V3.9.15 progress placement
   Keep the step timeline out of the page header. On desktop it sits below the
   preview/choice row; on smaller screens it follows the preview directly.
================================ */
.gd-progress-row{
  grid-column:1 / -1;
  min-width:0;
}

.gd-progress-row .gd-progress{
  margin:0;
}

.gd-nav-row{
  grid-column:1;
  min-width:0;
}

.gd-nav-row .gd-preview-nav{
  margin-top:0;
}

.gd-layout.is-preview-only .gd-progress-row,
.gd-layout.is-preview-only .gd-nav-row{
  grid-column:1 / -1;
}

@media (max-width:860px){
  .gd-preview-column{ order:1; }
  .gd-progress-row{ order:2; }
  .gd-controls-column{ order:3; }
  .gd-nav-row{ order:4; grid-column:1 / -1; }
}


/* ================================
   V3.9.16 workflow consolidation
   Presentation only. Gate geometry, dimensions and mechanics are untouched.
================================ */

/* One continuous designer surface instead of a collection of disconnected cards. */
.gd-workflow-shell{
  padding:22px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:24px;
  background:
    radial-gradient(900px 360px at 8% 0%,rgba(213,180,108,.045),transparent 58%),
    linear-gradient(180deg,rgba(14,20,28,.72),rgba(8,13,19,.62));
}

.gd-workflow-head{
  padding:0 2px 17px;
  border-bottom:1px solid rgba(255,255,255,.065);
  margin-bottom:20px;
}

.gd-workflow-head .gd-header{
  margin:0;
}

.gd-workflow-head .gd-title{
  margin-top:5px;
}

/* Cards still separate preview from choices/specification, but no longer look like
   unrelated floating panels inside the workflow. */
.gd-workflow-shell .gd-panel{
  border-radius:16px;
  border-color:rgba(255,255,255,.075);
  box-shadow:none;
  background:rgba(255,255,255,.018);
}

.gd-workflow-shell .gd-preview-panel{
  background:rgba(255,255,255,.015);
}

/* Scale information becomes a compact information strip rather than a second card. */
.gd-workflow-shell .gd-scale-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:5px 12px;
  align-items:baseline;
  margin-top:10px;
  padding:9px 2px 2px;
  border:0;
  border-top:1px solid rgba(255,255,255,.075);
  border-radius:0;
  background:transparent;
}

.gd-workflow-shell .gd-scale-note strong{
  text-align:right;
  font-size:.7rem;
}

.gd-workflow-shell .gd-scale-note small{
  grid-column:1 / -1;
  margin-top:0;
  font-size:.65rem;
}

/* The specification already contains these selections on the review page. */
.gd-layout.is-summary .gd-preview-tags{
  display:none !important;
}

/* Progress and navigation form the footer of the same workflow surface. */
.gd-progress-row{
  padding-top:18px;
  margin-top:2px;
  border-top:1px solid rgba(255,255,255,.065);
}

.gd-nav-row{
  grid-column:1 / -1;
}

.gd-nav-row .gd-preview-nav{
  margin-top:0;
  padding:10px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.gd-workflow-note{
  grid-column:1 / -1;
  padding-top:12px;
  margin-top:-2px;
  color:rgba(255,255,255,.40);
  font-size:.69rem;
  line-height:1.45;
}

/* The standalone page disclaimer is now represented once inside the designer shell. */
.designer-page.is-designer-ready > .container > .note{
  display:none;
}

/* Review: preview and spec align as a single, balanced workspace. */
@media (min-width:861px){
  .gd-layout.is-summary{
    grid-template-columns:minmax(0,1.38fr) minmax(340px,.82fr);
    gap:20px;
  }

  .gd-layout.is-summary .gd-preview-panel,
  .gd-layout.is-summary .gd-summary-panel{
    height:100%;
  }

  .gd-layout.is-summary .gd-summary-panel{
    padding:18px;
  }

  .gd-layout.is-summary .gd-preview-panel{
    padding:18px;
  }

  .gd-layout.is-summary .gd-preview-frame{
    min-height:360px;
  }
}

/* Tablet / portrait: preserve exactly the same hierarchy by stacking the two content
   areas, then progress, navigation and the single note. */
@media (max-width:860px){
  .gd-workflow-shell{
    padding:16px;
    border-radius:20px;
  }

  .gd-workflow-head{
    padding-bottom:14px;
    margin-bottom:16px;
  }

  .gd-preview-column{ order:1; }
  .gd-controls-column{ order:2; }
  .gd-progress-row{ order:3; }
  .gd-nav-row{ order:4; }
  .gd-workflow-note{ order:5; }

  .gd-workflow-shell .gd-scale-note{
    grid-template-columns:1fr;
  }

  .gd-workflow-shell .gd-scale-note strong{
    text-align:left;
  }
}

@media (max-width:620px){
  .gd-workflow-shell{
    padding:12px;
    border-radius:17px;
  }

  .gd-workflow-shell .gd-panel{
    padding:14px;
    border-radius:14px;
  }

  .gd-workflow-head .gd-title{
    font-size:1.45rem;
  }

  .gd-workflow-head .gd-subtitle{
    font-size:.84rem;
  }

  .gd-progress-row{
    padding-top:14px;
  }

  .gd-workflow-note{
    font-size:.66rem;
  }
}


/* ================================
   V3.9.17 review-page polish
   Presentation only. No gate drawing, scale, dimension or automation logic changed.
================================ */

/* Once the app is ready, the workflow itself owns the page heading at every
   breakpoint. This removes the duplicate "Design your gate" / step heading on
   portrait and tablet as well as desktop. */
.designer-page.is-designer-ready .designer-page-head{
  display:none !important;
}

.designer-page.is-designer-ready{
  padding-top:24px;
}

.designer-page.is-review-page{
  padding-top:20px;
}

/* Tighten the workflow heading without making it feel cramped. */
.designer-page.is-review-page .gd-workflow-head{
  padding-bottom:12px;
  margin-bottom:16px;
}

.designer-page.is-review-page .gd-workflow-head .gd-title{
  margin-top:3px;
}

.designer-page.is-review-page .gd-workflow-head .gd-subtitle{
  margin-top:5px;
}

/* The specification is intentionally denser on review: same information,
   less vertical drift on portrait screens. */
.gd-layout.is-summary .gd-summary-panel{
  padding:16px;
}

.gd-layout.is-summary .gd-summary-heading{
  padding-bottom:10px;
}

.gd-layout.is-summary .gd-summary-groups{
  gap:13px;
  margin-top:12px;
}

.gd-layout.is-summary .gd-summary-section-title{
  margin-bottom:2px;
}

.gd-layout.is-summary .gd-summary-row{
  padding:6px 0;
  gap:14px;
  line-height:1.35;
}

.gd-layout.is-summary .gd-summary-actions-primary{
  margin-top:14px;
}

.gd-layout.is-summary .gd-summary-actions-secondary{
  margin-top:7px;
}

.gd-layout.is-summary .gd-mini-note{
  margin-top:10px;
  padding:8px 10px;
}

/* Slimmer progress footer so it reads as navigation rather than another card. */
.gd-progress-row{
  padding-top:13px;
}

.gd-progress-row .gd-progress{
  gap:6px;
}

.gd-progress-row .gd-progress-item{
  min-height:34px;
  padding:5px 8px;
  font-size:.69rem;
}

.gd-progress-row .gd-progress-dot{
  width:18px;
  height:18px;
  font-size:.6rem;
}

/* On the final review step there is no Next button, so use the footer cleanly:
   Back on the left and a small Reset action on the far right. */
.gd-layout.is-summary .gd-preview-nav{
  grid-template-columns:auto 1fr;
  gap:10px;
  padding-top:7px;
}

.gd-layout.is-summary .gd-preview-nav .gd-reset-link{
  justify-self:end;
  margin:0;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:10px;
  background:rgba(255,255,255,.018);
  color:rgba(255,255,255,.55);
  font-size:.72rem;
}

.gd-layout.is-summary .gd-preview-nav .gd-reset-link:hover{
  border-color:rgba(213,180,108,.28);
  background:rgba(213,180,108,.06);
  color:#d5b46c;
}

/* Keep the end of the workflow compact before the site footer. */
.gd-layout.is-summary .gd-workflow-note{
  padding-top:9px;
  font-size:.65rem;
}

@media (max-width:860px){
  .designer-page.is-designer-ready,
  .designer-page.is-review-page{
    padding-top:16px;
  }

  .gd-workflow-shell{
    padding-top:13px;
  }

  .gd-layout.is-summary .gd-summary-panel{
    padding:14px;
  }

  .gd-layout.is-summary .gd-summary-row{
    padding:5.5px 0;
    font-size:.79rem;
  }

  .gd-progress-row{
    padding-top:11px;
  }

  .gd-progress-row .gd-progress{
    margin-bottom:0;
    padding-bottom:0;
  }

  .gd-progress-row .gd-progress-item{
    min-height:31px;
    padding:4px 7px;
    font-size:.66rem;
  }

  .gd-progress-row .gd-progress-dot{
    width:17px;
    height:17px;
  }
}

@media (max-width:620px){
  .designer-page.is-designer-ready,
  .designer-page.is-review-page{
    padding-top:12px;
  }

  .designer-page.is-review-page .gd-workflow-head{
    padding-bottom:10px;
    margin-bottom:12px;
  }

  .gd-layout.is-summary .gd-summary-groups{
    gap:10px;
  }

  .gd-layout.is-summary .gd-summary-actions-primary,
  .gd-layout.is-summary .gd-summary-actions-secondary{
    gap:7px;
  }
}


/* ================================
   V3.9.18 review density + action hierarchy
   Presentation-only refinements. Gate drawing, millimetre model, dimensions,
   automation geometry and designer state/step mechanics are unchanged.
================================ */

/* Make the grouped specification faster to scan without stretching portrait pages. */
.gd-layout.is-summary .gd-summary-section-title{
  margin-bottom:3px;
  color:#e6ca7f;
  font-size:.75rem;
  font-weight:950;
  letter-spacing:.105em;
}

.gd-layout.is-summary .gd-summary-groups{
  gap:11px;
  margin-top:11px;
}

.gd-layout.is-summary .gd-summary-row{
  padding:5px 0;
  line-height:1.28;
}

.gd-layout.is-summary .gd-summary-row span{
  color:rgba(224,229,235,.68);
}

.gd-layout.is-summary .gd-summary-row strong{
  color:rgba(255,255,255,.96);
  font-weight:760;
}

/* The stepper should be readable, but remain visually subordinate to the design. */
.gd-progress-row{
  padding-top:14px;
}

.gd-progress-row .gd-progress{
  gap:7px;
}

.gd-progress-row .gd-progress-item{
  min-height:36px;
  padding:6px 9px;
  font-size:.7rem;
}

.gd-progress-row .gd-progress-dot{
  width:19px;
  height:19px;
  font-size:.61rem;
}

/* Give the actual enquiry action a clear first-place hierarchy. */
.gd-layout.is-summary .gd-summary-actions-primary{
  margin-top:13px;
  gap:8px;
}

.gd-layout.is-summary .gd-summary-actions-secondary{
  margin-top:7px;
  gap:8px;
}

.gd-layout.is-summary .gd-summary-actions-primary .btn[data-action="send-enquiry"]{
  min-height:48px;
  padding:12px 14px;
  font-weight:850;
  letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.16);
}

.gd-layout.is-summary .gd-summary-actions-primary .btn[data-action="pdf"]{
  min-height:42px;
  color:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
}

.gd-layout.is-summary .gd-summary-actions-secondary .btn{
  min-height:36px;
  padding:8px 11px;
  color:rgba(255,255,255,.61);
  border-color:rgba(255,255,255,.065);
  background:rgba(255,255,255,.012);
  font-size:.73rem;
}

/* Reset remains secondary, but should not disappear into the background. */
.gd-layout.is-summary .gd-preview-nav .gd-reset-link{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.68);
}

.gd-layout.is-summary .gd-preview-nav .gd-reset-link:focus-visible{
  outline:2px solid rgba(213,180,108,.55);
  outline-offset:2px;
}

@media (max-width:860px){
  .gd-layout.is-summary .gd-summary-panel{
    padding:13px 14px;
  }

  .gd-layout.is-summary .gd-summary-groups{
    gap:9px;
    margin-top:10px;
  }

  .gd-layout.is-summary .gd-summary-row{
    padding:4.5px 0;
    font-size:.78rem;
  }

  .gd-progress-row{
    padding-top:12px;
  }

  .gd-progress-row .gd-progress-item{
    min-height:34px;
    padding:5px 8px;
    font-size:.68rem;
  }

  .gd-progress-row .gd-progress-dot{
    width:18px;
    height:18px;
  }

  .gd-layout.is-summary .gd-summary-actions-primary .btn[data-action="send-enquiry"]{
    min-height:46px;
  }
}

@media (max-width:620px){
  .gd-layout.is-summary .gd-summary-section-title{
    font-size:.72rem;
  }

  .gd-layout.is-summary .gd-summary-actions-primary,
  .gd-layout.is-summary .gd-summary-actions-secondary{
    grid-template-columns:1fr 1fr;
  }

  .gd-layout.is-summary .gd-summary-actions-primary .btn,
  .gd-layout.is-summary .gd-summary-actions-secondary .btn{
    min-width:0;
  }
}


/* ================================
   V3.9.19 ENTREX identity pass
   Presentation + copy only. Gate geometry, dimensions, automation mechanics and
   drawing calculations are intentionally unchanged. The PDF view is untouched.
================================ */

/* The whole tool now reads as an ENTREX-built design studio rather than a generic
   configurator. Keep the treatment restrained: technical lines, gold accents and
   deliberate typography rather than extra decorative cards. */
.gd-workflow-shell{
  position:relative;
  overflow:hidden;
  border-color:rgba(213,180,108,.16);
  background:
    linear-gradient(90deg,rgba(213,180,108,.055) 0,rgba(213,180,108,0) 150px),
    linear-gradient(180deg,rgba(14,20,28,.78),rgba(8,13,19,.67));
}

.gd-workflow-shell::before,
.gd-workflow-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.gd-workflow-shell::before{
  left:0;
  top:42px;
  width:3px;
  height:82px;
  background:linear-gradient(180deg,#e1c47b,rgba(213,180,108,.12));
}

.gd-workflow-shell::after{
  right:22px;
  top:0;
  width:92px;
  height:1px;
  background:linear-gradient(90deg,transparent,#d5b46c);
  opacity:.7;
}

.gd-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.gd-brand-lockup{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:30px;
  margin-bottom:8px;
}

.gd-brand-word{
  color:#e4c677;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.18em;
  line-height:1;
}

.gd-brand-lines{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-left:10px;
  border-left:1px solid rgba(213,180,108,.32);
  line-height:1;
}

.gd-brand-lines span{
  color:rgba(255,255,255,.78);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.105em;
}

.gd-brand-lines small{
  color:rgba(213,180,108,.76);
  font-size:.49rem;
  font-weight:800;
  letter-spacing:.12em;
}

.gd-brand-lockup .gd-version-pill{
  margin-left:2px;
  padding:4px 7px;
  border-color:rgba(213,180,108,.18);
  background:rgba(213,180,108,.045);
  color:rgba(225,199,130,.72);
  font-size:.58rem;
}

.gd-concept-ref{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  margin-top:2px;
  padding:7px 10px 7px 12px;
  border-right:2px solid rgba(213,180,108,.55);
  background:linear-gradient(90deg,transparent,rgba(213,180,108,.045));
  text-transform:uppercase;
}

.gd-concept-ref span{
  color:rgba(255,255,255,.38);
  font-size:.53rem;
  font-weight:800;
  letter-spacing:.11em;
}

.gd-concept-ref strong{
  color:#d7bb72;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.075em;
}

/* Technical ENTREX title rail for the live drawing only. The SVG drawing itself is
   deliberately untouched so all current millimetre geometry remains identical. */
.gd-drawing-brandbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:13px;
  padding:8px 10px;
  border:1px solid rgba(213,180,108,.13);
  border-bottom:0;
  border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,rgba(213,180,108,.075),rgba(255,255,255,.012) 52%,transparent);
}

.gd-drawing-brandbar > div:first-child{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}

.gd-drawing-brandbar > div:first-child strong{
  color:#e1c47b;
  font-size:.76rem;
  letter-spacing:.15em;
}

.gd-drawing-brandbar > div:first-child span,
.gd-drawing-meta span{
  color:rgba(255,255,255,.42);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.09em;
}

.gd-drawing-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}

.gd-drawing-meta strong{
  color:rgba(255,255,255,.70);
  font-size:.61rem;
  letter-spacing:.06em;
  white-space:nowrap;
}

.gd-drawing-brandbar + .gd-preview-frame{
  margin-top:0;
  border-radius:0 0 10px 10px;
}

/* Make selections feel like engineered ENTREX specification cards rather than
   generic plug-in tiles. */
.gd-option,
.gd-style-card,
.gd-finish{
  border-radius:12px;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}

.gd-option::after,
.gd-style-card::after,
.gd-finish::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:transparent;
}

.gd-option.is-selected,
.gd-style-card.is-selected,
.gd-finish.is-selected{
  border-color:rgba(213,180,108,.42);
  background:linear-gradient(180deg,rgba(213,180,108,.085),rgba(213,180,108,.025));
}

.gd-option.is-selected::after,
.gd-style-card.is-selected::after,
.gd-finish.is-selected::after{
  background:linear-gradient(90deg,transparent,#d5b46c,transparent);
}

/* The progress rail becomes a low-profile technical process bar instead of five
   rounded SaaS pills. Placement remains exactly where V3.9.18 put it. */
.gd-progress-row .gd-progress{
  position:relative;
  gap:0;
  border:1px solid rgba(255,255,255,.065);
  border-radius:9px;
  overflow:hidden;
  background:rgba(0,0,0,.12);
}

.gd-progress-row .gd-progress-item{
  position:relative;
  min-height:37px;
  justify-content:center;
  border:0;
  border-right:1px solid rgba(255,255,255,.055);
  border-radius:0;
  background:transparent;
}

.gd-progress-row .gd-progress-item:last-child{
  border-right:0;
}

.gd-progress-row .gd-progress-item.is-active{
  background:linear-gradient(180deg,rgba(213,180,108,.095),rgba(213,180,108,.025));
  box-shadow:inset 0 -2px 0 #d5b46c;
}

.gd-progress-row .gd-progress-item.is-complete{
  background:rgba(213,180,108,.025);
}

.gd-progress-row .gd-progress-dot{
  width:18px;
  height:18px;
  border-radius:4px;
  background:rgba(255,255,255,.055);
}

.gd-progress-row .gd-progress-item.is-active .gd-progress-dot,
.gd-progress-row .gd-progress-item.is-complete .gd-progress-dot{
  background:#d5b46c;
}

/* Review should feel like a signed-off concept sheet rather than an admin table. */
.gd-layout.is-summary .gd-summary-panel{
  border-top:2px solid rgba(213,180,108,.36);
}

.gd-layout.is-summary .gd-summary-heading{
  position:relative;
}

.gd-layout.is-summary .gd-summary-section-title{
  display:flex;
  align-items:center;
  gap:7px;
}

.gd-layout.is-summary .gd-summary-section-title::before{
  content:"";
  width:13px;
  height:1px;
  background:#d5b46c;
  opacity:.7;
}

.gd-layout.is-summary .gd-summary-actions-primary .btn[data-action="send-enquiry"]{
  border-color:rgba(226,196,119,.52);
  background:linear-gradient(180deg,rgba(151,121,55,.48),rgba(84,67,31,.58));
}

/* A designer-specific mobile footer treatment. gate-designer.css is only loaded on
   this route, so this does not alter the marketing footer elsewhere on the site. */
@media (max-width:700px){
  footer,
  .site-footer{
    padding-top:26px !important;
    padding-bottom:82px !important;
  }

  footer .container,
  .site-footer .container{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  footer p,
  footer li,
  footer a,
  .site-footer p,
  .site-footer li,
  .site-footer a{
    line-height:1.4;
  }

  .gd-header{
    gap:12px;
  }

  .gd-concept-ref{
    display:none;
  }

  .gd-brand-lockup{
    gap:8px;
    margin-bottom:7px;
  }

  .gd-brand-word{
    font-size:.88rem;
  }

  .gd-brand-lines{
    padding-left:8px;
  }

  .gd-brand-lines span{
    font-size:.56rem;
  }

  .gd-brand-lines small{
    font-size:.44rem;
  }

  .gd-drawing-brandbar{
    gap:8px;
    padding:7px 8px;
  }

  .gd-drawing-meta span{
    display:none;
  }

  .gd-drawing-brandbar > div:first-child span{
    font-size:.5rem;
  }

  .gd-drawing-meta strong{
    font-size:.55rem;
  }

  .gd-progress-row .gd-progress-item{
    min-height:34px;
    padding:4px 3px;
    gap:5px;
  }
}

@media (max-width:440px){
  .gd-brand-lines small{
    display:none;
  }

  .gd-brand-lockup .gd-version-pill{
    font-size:.53rem;
  }

  .gd-drawing-brandbar > div:first-child span{
    display:none;
  }

  .gd-progress-row .gd-progress-item > span:last-child{
    font-size:.61rem;
  }
}

.gd-style-card,
.gd-finish{
  position:relative;
}


/* ================================
   V3.9.20 restrained ENTREX finish
   Match the wider website first; keep bespoke branding mainly within the drawing.
================================ */
.gd-workflow-shell{
  border-color:rgba(255,255,255,.08);
  background:rgba(8,13,19,.66);
}

.gd-workflow-shell::before,
.gd-workflow-shell::after{
  display:none;
}

.gd-brand-lockup{
  gap:9px;
  margin-bottom:7px;
}

.gd-brand-word{
  color:#d5b46c;
  font-size:.9rem;
  letter-spacing:.14em;
}

.gd-brand-lines{
  padding-left:9px;
  border-left:1px solid rgba(255,255,255,.12);
}

.gd-brand-lines span{
  color:rgba(255,255,255,.60);
  font-size:.59rem;
  letter-spacing:.08em;
}

.gd-brand-lines small{
  display:none;
}

.gd-concept-ref{
  padding:5px 0 5px 10px;
  border-right:0;
  border-left:1px solid rgba(255,255,255,.09);
  background:none;
}

.gd-concept-ref strong{
  color:rgba(255,255,255,.64);
}

.gd-drawing-brandbar{
  margin-top:12px;
  padding:7px 10px;
  border-color:rgba(255,255,255,.09);
  background:#0b1118;
}

.gd-drawing-brandbar > div:first-child strong{
  color:#d5b46c;
  font-size:.7rem;
}

.gd-drawing-brandbar > div:first-child span,
.gd-drawing-meta span{
  color:rgba(255,255,255,.34);
}

.gd-drawing-meta strong{
  color:rgba(255,255,255,.50);
}

.gd-option,
.gd-style-card,
.gd-finish{
  border-radius:10px;
}

.gd-option::after,
.gd-style-card::after,
.gd-finish::after{
  display:none;
}

.gd-option.is-selected,
.gd-style-card.is-selected,
.gd-finish.is-selected{
  border-color:rgba(213,180,108,.34);
  background:rgba(213,180,108,.055);
}

.gd-progress-row .gd-progress{
  border-color:rgba(255,255,255,.07);
  background:rgba(255,255,255,.015);
}

.gd-progress-row .gd-progress-item.is-active{
  background:rgba(213,180,108,.045);
  box-shadow:inset 0 -1px 0 rgba(213,180,108,.72);
}

.gd-progress-row .gd-progress-item.is-complete{
  background:transparent;
}

.gd-layout.is-summary .gd-summary-panel{
  border-top:1px solid rgba(255,255,255,.08);
}

.gd-layout.is-summary .gd-summary-section-title::before{
  background:rgba(213,180,108,.64);
}

.gd-layout.is-summary .gd-summary-actions-primary .btn[data-action="send-enquiry"]{
  border-color:rgba(213,180,108,.40);
  background:var(--gold, #b7964d);
}

/* Quiet SEO content below the live tool. Useful to search engines and customers,
   but deliberately lower contrast so it never competes with the configurator. */
.designer-seo{
  margin-top:44px;
  padding-top:34px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
}

.designer-seo__intro{
  max-width:820px;
}

.designer-seo h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(1.35rem,2vw,1.8rem);
}

.designer-seo h3{
  margin:0 0 6px;
  color:rgba(255,255,255,.91);
  font-size:1rem;
}

.designer-seo p{
  margin:0;
  line-height:1.68;
}

.designer-seo__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:26px;
}

.designer-seo__card{
  padding-top:18px;
  border-top:1px solid rgba(213,180,108,.18);
}

.designer-seo__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:26px;
}

.designer-seo__links a,
.designer-seo details a{
  color:#d5b46c;
  text-decoration:none;
}

.designer-seo__faq{
  margin-top:34px;
}

.designer-seo details{
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.07);
}

.designer-seo details:last-child{
  border-bottom:1px solid rgba(255,255,255,.07);
}

.designer-seo summary{
  cursor:pointer;
  color:rgba(255,255,255,.88);
  font-weight:700;
}

.designer-seo details p{
  margin-top:9px;
  max-width:880px;
}

@media (max-width:760px){
  .designer-seo{
    margin-top:32px;
    padding-top:26px;
  }
  .designer-seo__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}


/* ================================
   V3.9.23 narrow-mobile operation picker
   Keep the first-step technical sheet entirely inside the phone viewport.
================================ */
@media (max-width:620px){
  .gd-workflow-shell,
  .gd-layout,
  .gd-preview-column,
  .gd-preview-panel,
  .gd-drawing-brandbar,
  .gd-preview-frame{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  .gd-preview-panel.is-operation-picker .gd-preview-frame{
    width:100%;
    min-height:0 !important;
    height:auto;
    aspect-ratio:500 / 760;
    overflow:hidden;
  }

  .gd-preview-panel.is-operation-picker .gd-preview-frame svg{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
  }
}


/* ================================
   V3.9.24 integrated workflow footer
   Presentation only. Progress + navigation now belong visually to the designer
   shell instead of reading as separate controls underneath it.
================================ */
.gd-workflow-footer{
  grid-column:1 / -1;
  min-width:0;
  margin-top:2px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.065);
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}

.gd-workflow-footer .gd-progress-row,
.gd-workflow-footer .gd-nav-row,
.gd-workflow-footer .gd-workflow-note{
  grid-column:1;
  margin:0;
  padding-top:0;
  border-top:0;
}

.gd-workflow-footer .gd-progress{
  margin:0;
}

.gd-workflow-footer .gd-preview-nav{
  margin:0;
  padding:3px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.gd-workflow-footer .gd-workflow-note{
  padding-top:2px;
  color:rgba(255,255,255,.38);
}

/* Keep the designer footer attached to the content above it at every step. */
.gd-layout > .gd-workflow-footer{
  align-self:stretch;
}

@media (min-width:861px){
  .gd-workflow-footer{
    margin-top:-2px;
  }

  .gd-workflow-footer .gd-preview-nav{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
  }

  .gd-layout.is-summary .gd-workflow-footer .gd-preview-nav{
    grid-template-columns:auto 1fr;
  }
}

@media (max-width:860px){
  .gd-preview-column{ order:1; }
  .gd-controls-column{ order:2; }
  .gd-workflow-footer{
    order:3;
    margin-top:0;
    padding-top:12px;
    gap:8px;
  }
}

@media (max-width:620px){
  .gd-workflow-footer{
    padding-top:10px;
  }

  .gd-workflow-footer .gd-preview-nav{
    padding-top:2px;
  }

  .gd-workflow-footer .gd-workflow-note{
    font-size:.64rem;
    line-height:1.4;
  }
}


/* ================================
   V3.9.25 mobile polish
   Small presentation refinements only: clearer workflow progress, tighter choice
   cards and a quieter selected state. Designer geometry/mechanics are unchanged.
================================ */

/* Choice cards: retain a generous tap target without the tall empty space that
   made simple two-option screens feel oversized. */
.gd-option{
  min-height:104px;
  padding:16px 17px;
  box-shadow:0 9px 22px rgba(0,0,0,.13);
}

.gd-option > span:not(.gd-option-mark){
  margin-top:5px;
  line-height:1.40;
}

/* Selected state should read as refined ENTREX feedback, rather than a bright
   form/plugin highlight. */
.gd-option.is-selected{
  border-color:rgba(213,180,108,.34);
  background:linear-gradient(180deg,rgba(213,180,108,.050),rgba(255,255,255,.018));
  box-shadow:inset 0 0 0 1px rgba(213,180,108,.07),0 8px 22px rgba(0,0,0,.14);
}

.gd-option.is-selected::after{
  opacity:.58;
}

.gd-option.is-selected .gd-option-mark{
  background:rgba(213,180,108,.92);
}

/* Progress remains compact, but the labels and step markers are now a little
   easier to read on phones/tablets. */
.gd-workflow-footer .gd-progress-row .gd-progress-item{
  min-height:39px;
}

.gd-workflow-footer .gd-progress-row .gd-progress-dot{
  width:19px;
  height:19px;
  font-size:.66rem;
}

.gd-workflow-footer .gd-progress-row .gd-progress-item > span:last-child{
  font-size:.69rem;
  letter-spacing:.005em;
}

@media (max-width:620px){
  .gd-option{
    min-height:92px;
    padding:14px 15px;
  }

  .gd-option strong{
    font-size:.95rem;
  }

  .gd-option > span:not(.gd-option-mark){
    font-size:.80rem;
    line-height:1.36;
  }

  .gd-option-mark{
    top:12px;
    right:12px;
    width:22px;
    height:22px;
  }

  .gd-workflow-footer .gd-progress-row .gd-progress-item{
    min-height:38px;
    padding:5px 3px;
    gap:5px;
  }

  .gd-workflow-footer .gd-progress-row .gd-progress-item > span:last-child{
    font-size:.65rem;
  }
}

@media (max-width:440px){
  .gd-workflow-footer .gd-progress-row .gd-progress-item > span:last-child{
    font-size:.63rem;
  }

  .gd-workflow-footer .gd-progress-row .gd-progress-dot{
    width:18px;
    height:18px;
  }
}