/* fjd1 modern v1 - simple, readable, easy to edit */
:root{
  --bg:#eef4f9;
  --panel:#ffffff;
  --panel2:#f6f9fc;
  --text:#12233d;
  --muted:#5f7188;
  --accent:#008fc7;
  --accent2:#a12ac4;
  --good:#d7007f;
  --warn:#b56b00;
  --border:rgba(18,35,61,.13);
  --shadow:0 10px 26px rgba(31,56,86,.10);
  --radius:18px;
  --max:1120px;
  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:
    radial-gradient(1000px 700px at 15% 10%, rgba(90,200,250,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(155,107,255,.16), transparent 55%),
    radial-gradient(900px 600px at 40% 90%, rgba(85,211,138,.10), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
small,.muted{color:var(--muted)}
code,pre{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}
pre{white-space:pre-wrap;background:rgba(255,255,255,.05);padding:12px;border-radius:12px;border:1px solid var(--border)}

.wrap{max-width:var(--max); margin:0 auto; padding:18px}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  display:block;
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:13px;
  border:1px solid rgba(85,214,255,.42);
  box-shadow:0 0 18px rgba(0,196,255,.16);
}
.brand h1{font-size:18px;margin:0;line-height:1.1}
.brand .tag{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  color:var(--text);
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:12px;
}
.nav a:hover,
.nav a.is-active{
  border-color:var(--border);
  background:rgba(255,255,255,.04);
  text-decoration:none;
}
.nav a.is-active{
  box-shadow: inset 0 -2px 0 var(--accent);
}

.hero{
  margin:18px 0 0;
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:16px;
}
@media (max-width: 920px){
  .hero{grid-template-columns:1fr}
}

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card .pad{padding:16px}
.card h2{margin:0 0 10px;font-size:18px}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0 0 10px; color:rgba(234,240,255,.92); line-height:1.5}
.kicker{color:var(--muted); font-size:13px; margin-bottom:10px}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
}
.tile{
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  padding:14px;
}
.tile .t{font-weight:700}
.tile .d{color:var(--muted); font-size:13px; margin-top:6px; line-height:1.4}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:var(--muted)}
.badge.good{color:#0b2; border-color:rgba(85,211,138,.45); background:rgba(85,211,138,.08)}
.badge.warn{color:#cc9; border-color:rgba(255,209,102,.45); background:rgba(255,209,102,.08)}

.sidecol .shot{
  height:110px; border-radius:16px; border:1px solid var(--border);
  background:
    radial-gradient(60px 60px at 20% 30%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, rgba(90,200,250,.25), rgba(155,107,255,.18)),
    rgba(255,255,255,.04);
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}
.sidecol .shot:after{
  content:"";
  position:absolute; inset:-40px -80px auto auto;
  width:180px; height:180px;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  transform: rotate(20deg);
}
.sidecol .shot .cap{
  position:absolute; left:12px; bottom:10px;
  font-size:12px; color:rgba(234,240,255,.85);
  padding:4px 8px; border-radius:999px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12);
}

.section{margin:16px 0}
.footer{
  margin:22px 0 10px;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--muted);
  background:rgba(255,255,255,.03);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center;
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text); text-decoration:none}

/* Shared spacing and content helpers */
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mb-0{margin-bottom:0}
.grid-spaced{margin-top:12px}
.grid-spaced-lg{margin-top:14px}
.section-subhead{margin-top:14px}
.tile-actions{margin-top:10px; display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.tile-note{margin-top:10px}
.tile-notes{margin-top:10px; line-height:1.4}
.line-relaxed{line-height:1.55}
.compact-list{margin:10px 0 0 18px}
.navigation-help{margin-top:14px}

/* Portfolio media */
.portfolio-shot{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
}
.portfolio-shot-borderless{border:0}
.app-icon{width:120px; max-width:100%; height:auto; border-radius:10px}

/* Simple X3D demo page */
.x3d-demo-tile{margin-top:14px}
.x3d-demo-frame{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.x3d-demo-canvas{width:100%; height:520px; background:#000}

/* Standalone model viewers used by x3d_gallery.php */
.viewer-root{width:100%;height:100%;margin:0;overflow:hidden;background:#111923}
body.viewer-page{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#111923;
}
.x3d-full-canvas{
  display:block;
  width:100%;
  height:100%;
  background:#111923;
}
.viewer-status{
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:3;
  max-width:calc(100% - 24px);
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font:14px/1.35 system-ui,sans-serif;
  pointer-events:none;
  transition:opacity .35s ease;
}
.viewer-status-compact{
  left:10px;
  bottom:10px;
  z-index:2;
  padding:6px 9px;
  border-color:rgba(255,255,255,.18);
  border-radius:7px;
  background:rgba(0,0,0,.68);
  font-size:13px;
  transition-duration:.3s;
}

/* VRML & X3D Gallery */
.x3d-gallery-intro{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:16px;
}
.x3d-gallery-intro h2{margin-top:0;margin-bottom:7px}
.x3d-gallery-intro p{margin:0;line-height:1.55}
.x3d-panel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.x3d-panel{
  min-width:0;
  margin-top:0!important;
  display:flex;
  flex-direction:column;
}
.x3d-panel-head{min-height:86px}
.x3d-panel-head .t{margin-bottom:4px}
.x3d-panel-head .d{line-height:1.45}
.x3d-model-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.x3d-model-button{
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 12px;
  background:rgba(255,255,255,.045);
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.x3d-model-button:hover,
.x3d-model-button:focus-visible{background:rgba(255,255,255,.09)}
.x3d-model-button.is-active{
  border-color:rgba(128,210,145,.8);
  background:rgba(52,122,69,.78);
  color:#fff;
}
.x3d-view-frame{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#111923;
}
.x3d-view-frame iframe{display:block;width:100%;height:470px;border:0;background:#111923}
.x3d-panel-foot{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  font-size:.9rem;
}
.x3d-related-list{display:grid;gap:10px;margin-top:12px}
.x3d-related-link{
  display:block;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  text-decoration:none;
}
.x3d-related-link strong{display:block;margin-bottom:3px}
.x3d-related-link span{display:block;color:var(--muted);line-height:1.45}
.x3d-related-link:hover,
.x3d-related-link:focus-visible{background:rgba(255,255,255,.075)}
.x3d-navigation-note{margin-top:16px}
.gallery-project-note{margin:14px 0 0;line-height:1.5}

@media (max-width:900px){
  .x3d-panel-grid{grid-template-columns:1fr}
  .x3d-view-frame iframe{height:520px}
  .x3d-panel-head{min-height:0}
}
@media (max-width:560px){
  .x3d-gallery-intro{display:block}
  .x3d-view-frame iframe{height:420px}
  .x3d-model-button{flex:1 1 auto}
}

/* FJD1 visual refresh 03 — light service content with dark branded header/footer. */

body{
  background:
    radial-gradient(950px 560px at 8% 0%, rgba(0,178,226,.10), transparent 62%),
    radial-gradient(820px 500px at 93% 10%, rgba(221,0,128,.07), transparent 60%),
    linear-gradient(180deg, #edf4f9 0%, #f8fafc 42%, #eef3f7 100%);
  color:#12233d;
}

.topbar{
  border-color:rgba(58,201,242,.38);
  background:
    radial-gradient(300px 150px at 15% 12%, rgba(0,224,255,.30), transparent 66%),
    radial-gradient(320px 170px at 88% 30%, rgba(255,0,145,.24), transparent 68%),
    linear-gradient(115deg, rgba(5,42,79,.76), rgba(31,20,77,.70)),
    url('../images/tile.png');
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-position:center, center, center, top left;
  background-size:auto, auto, auto, 250px 250px;
  box-shadow:0 14px 30px rgba(7,25,48,.18), inset 0 1px 0 rgba(255,255,255,.11);
}

.brand h1{color:#fff}
.brand .tag{color:#c4effb}

.nav a{color:#f4fcff}
.nav a:hover,
.nav a.is-active{
  border-color:rgba(109,222,255,.38);
  background:rgba(5,37,68,.42);
}
.nav a.is-active{box-shadow:inset 0 -2px 0 #ff168f}

.home-brand-banner{
  margin:16px 0 0;
  overflow:hidden;
  border:1px solid rgba(36,159,205,.20);
  border-radius:18px;
  background:#07152a;
  box-shadow:0 14px 30px rgba(25,51,78,.13);
}
.home-brand-banner img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  object-position:center;
}
.hero{margin-top:16px}

.card{
  border-color:rgba(29,87,124,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(248,251,254,.54)),
    url('../images/tile.png');
  background-repeat:no-repeat, repeat;
  background-position:center, top left;
  background-size:auto, 300px 300px;
  box-shadow:0 10px 26px rgba(31,56,86,.09);
}
.card h2,.card h3,.tile .t{color:#102d4b}
.card p{color:#29405a}

.tile{
  border-color:rgba(29,87,124,.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(244,248,251,.64)),
    url('../images/tile.png');
  background-repeat:no-repeat, repeat;
  background-position:center, top left;
  background-size:auto, 250px 250px;
  box-shadow:0 4px 12px rgba(31,56,86,.035);
}
.tile .d,.muted,small{color:#617489}
.kicker{color:#007eaa;font-weight:600;letter-spacing:.01em}

a{color:#007fae}
a:hover{color:#d10078}

.badge{
  border-color:rgba(0,129,174,.26);
  color:#006f98;
  background:#f3fbfe;
}
.badge:hover{
  text-decoration:none;
  border-color:rgba(0,129,174,.42);
  background:#eaf8fd;
}
.badge.good{
  color:#c60072;
  border-color:rgba(214,0,122,.32);
  background:#fff3fa;
}
.badge.good:hover{
  color:#9f005b;
  border-color:rgba(214,0,122,.48);
  background:#ffeaf6;
}
.badge.warn{
  color:#8a5800;
  border-color:rgba(181,107,0,.28);
  background:#fff8e8;
}

.sidecol .shot{
  border-color:rgba(24,113,157,.16);
  background:
    radial-gradient(90px 90px at 82% 28%, rgba(218,0,128,.08), transparent 62%),
    radial-gradient(95px 95px at 18% 30%, rgba(0,174,220,.12), transparent 64%),
    linear-gradient(135deg,#fbfdff,#edf6fb);
}
.sidecol .shot:after{
  background:radial-gradient(circle,rgba(0,174,220,.10),transparent 68%);
}
.sidecol .shot .cap{
  color:#153552;
  background:rgba(255,255,255,.92);
  border-color:rgba(18,84,125,.14);
}

.footer{
  border-color:rgba(58,201,242,.34);
  background:
    radial-gradient(280px 150px at 12% 45%, rgba(0,218,255,.28), transparent 67%),
    radial-gradient(300px 160px at 88% 50%, rgba(255,0,145,.22), transparent 68%),
    linear-gradient(115deg, rgba(5,42,79,.74), rgba(31,20,77,.68)),
    url('../images/tile.png');
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-position:center, center, center, top left;
  background-size:auto, auto, auto, 250px 250px;
  color:#d7eef8;
  box-shadow:0 10px 24px rgba(7,25,48,.12), inset 0 1px 0 rgba(255,255,255,.10);
}
.footer a{color:#8eeaff}
.footer a:hover{color:#fff}

/* Keep technical/3D viewing surfaces intentionally dark. */
.x3d-demo-frame,.viewer-root,body.viewer-page,.x3d-full-canvas,.x3d-view-frame,.x3d-view-frame iframe{background:#111923}

.x3d-panel,.x3d-related-link{color:#12233d}
.x3d-model-button{
  border-color:rgba(20,87,125,.17);
  background:#f3f7fb;
  color:#173a57;
}
.x3d-model-button:hover,.x3d-model-button:focus-visible{background:#e8f4fa}
.x3d-model-button.is-active{
  border-color:rgba(214,0,122,.45);
  background:#fff0f8;
  color:#a90061;
}
.x3d-related-link{
  border-color:rgba(29,87,124,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(245,249,252,.66)),
    url('../images/tile.png');
  background-repeat:no-repeat, repeat;
  background-position:center, top left;
  background-size:auto, 250px 250px;
}
.x3d-related-link span{color:#617489}
.x3d-related-link:hover,.x3d-related-link:focus-visible{background:#eef7fb}

.portfolio-shot{
  border-color:rgba(29,87,124,.12);
  box-shadow:0 5px 14px rgba(31,56,86,.06);
}

@media (max-width:700px){.home-brand-banner img{height:160px}}

/* FJD1 visual refresh 08 — restrained accent borders and action colors. */

/* Give the two home-page hero cards a little more definition. */
.home-refresh .hero > .card{
  border-color:rgba(0,151,201,.32);
  border-top:3px solid #16b9df;
}
.home-refresh .hero > .sidecol > .card{
  border-color:rgba(190,39,139,.27);
  border-top:3px solid #d92a8c;
}

/* Use three restrained accent colors to separate the primary services. */
.home-refresh .hero > .card .grid > .tile:nth-child(1){
  border-top:3px solid #19b9df;
}
.home-refresh .hero > .card .grid > .tile:nth-child(2){
  border-top:3px solid #d92a8c;
}
.home-refresh .hero > .card .grid > .tile:nth-child(3){
  border-top:3px solid #e2a229;
}

/* Echo those accents in the Quick Start choices. */
.home-refresh .sidecol .shot:nth-of-type(1){
  border-left:3px solid #19b9df;
}
.home-refresh .sidecol .shot:nth-of-type(2){
  border-left:3px solid #d92a8c;
}
.home-refresh .sidecol .shot:nth-of-type(3){
  border-left:3px solid #e2a229;
}

/* Warm accent for the current-projects section without coloring the whole card. */
.home-refresh .hero + .section > .card{
  border-top:3px solid #e2a229;
}

/* Green is reserved for project/open/visit actions. */
.home-refresh .hero + .section .badge.good{
  color:#177a43;
  border-color:rgba(38,155,86,.38);
  background:#eefbf3;
}
.home-refresh .hero + .section .badge.good:hover{
  color:#0e5d31;
  border-color:rgba(38,155,86,.56);
  background:#e3f8eb;
}

/* The next major section gets a quiet cyan edge so the warm accent remains special. */
.home-refresh .hero + .section + .section > .card{
  border-top:3px solid rgba(25,185,223,.72);
}

/* Slightly stronger default borders on textured content cards site-wide. */
.card{
  border-left-color:rgba(31,126,173,.19);
  border-right-color:rgba(31,126,173,.19);
  border-bottom-color:rgba(31,126,173,.17);
}
.tile{
  border-left-color:rgba(31,126,173,.16);
  border-right-color:rgba(31,126,173,.16);
  border-bottom-color:rgba(31,126,173,.14);
}



/* FJD1 service-focus refresh 09 — website work first, DIY teaching second. */

.home-service-focus .home-main-heading{
  margin-bottom:8px;
  font-size:clamp(1.65rem, 3.1vw, 2.35rem);
  line-height:1.12;
  color:#0c2a49;
}

.home-service-focus .home-lead,
.diy-page .home-lead{
  max-width:72ch;
  font-size:1.03rem;
  line-height:1.62;
}

.home-primary-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
  margin:14px 0 4px;
}

.home-primary-cta{
  padding:6px 11px;
  font-weight:700;
}

.home-straightforward{
  margin-top:13px!important;
  color:#40566f!important;
}

.home-owner-card h2{
  margin-bottom:8px;
}

.home-owner-points{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.home-owner-point{
  padding:11px 12px;
  border:1px solid rgba(25,125,166,.16);
  border-left:3px solid #19b9df;
  border-radius:13px;
  background:rgba(255,255,255,.48);
}

.home-owner-point:nth-child(2){border-left-color:#d92a8c}
.home-owner-point:nth-child(3){border-left-color:#e2a229}

.home-owner-point strong{
  display:block;
  margin-bottom:3px;
  color:#123451;
}

.home-owner-point span{
  display:block;
  color:#5a6f85;
  font-size:.88rem;
  line-height:1.42;
}

.home-diy-strip > .card{
  border-top:3px solid #d92a8c!important;
}

.home-diy-layout{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr);
  gap:24px;
  align-items:center;
}

.home-diy-layout h2{
  margin-bottom:0;
}

.home-proof-section > .card{
  border-top:3px solid #19b9df!important;
}

.home-projects-section > .card{
  border-top:3px solid #e2a229!important;
}

.home-process-section > .card{
  border-top:3px solid #49a866!important;
}

.home-capability-grid{
  margin-top:14px;
}

.home-bottom-cta{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:15px;
  padding:12px 14px;
  border:1px solid rgba(33,126,173,.16);
  border-radius:14px;
  background:rgba(255,255,255,.44);
  color:#173650;
}

.diy-page .section:first-of-type > .card{
  border-top:3px solid #d92a8c;
}
.diy-page .section:nth-of-type(2) > .card{
  border-top:3px solid #19b9df;
}
.diy-page .section:nth-of-type(3) > .card{
  border-top:3px solid #e2a229;
}
.diy-page .section:nth-of-type(4) > .card{
  border-top:3px solid #49a866;
}

@media (max-width:920px){
  .home-diy-layout{
    grid-template-columns:1fr;
    gap:8px;
  }
}

@media (max-width:650px){
  .home-main-heading{font-size:1.7rem!important}
  .home-primary-actions .badge{padding:6px 10px}
}