@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');
*{box-sizing:border-box}
html{
    scroll-behavior:smooth}
    body{
        margin:0;background:var(--background);
        color:var(--ink);font-family:'Source Sans 3',Arial,sans-serif;
        font-size:17px;line-height:1.65
    }
    h1,h2,h3,h4,.brand,.nav a,.eyebrow{
        font-family:Montserrat,Arial,sans-serif
    }
    h1{
        font-size:clamp(2.4rem,5vw,4.5rem);
        line-height:1.1;
        font-weight:500;
        letter-spacing:-.055em
    }
    h2{
        font-size:clamp(1.5rem,2.5vw,2.5rem);
        line-height:1.22;letter-spacing:-.035em;
        font-weight:600
    }
    h3{
        font-size:1.1rem;
        font-weight:600
    }
    a{
        color:inherit
    }
    p{
        max-width:75ch
    }
    .eyebrow{
        text-transform:uppercase;
        letter-spacing:.18em;
        font-size:.69rem;
        font-weight:700;
        color:var(--accent)
    }
    .wrap{
        max-width:1120px;
        margin:0 auto;
        padding:0 28px
    }
    .topbar{
        background:var(--primary);
        color:var(--light);
        padding:17px 0
    }
    .topbar .wrap{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px
    }
    .brand{
        display:flex;
        align-items:center;
        gap:12px;
        font-size:.86rem;
        letter-spacing:.09em;
        font-weight:600;text-decoration:none
    }
    .brand svg{
        width:38px;
        height:38px;
        flex-shrink:0
    }
    .nav{
        display:flex;
        gap:21px;
        flex-wrap:wrap
    }
    .nav a{
        text-decoration:none;
        font-size:.69rem;
        letter-spacing:.04em;
        font-weight:600;
        opacity:.9
    }
    .nav a:hover,.nav a:focus{
        opacity:1;
        text-decoration:underline;
        text-underline-offset:5px
    }
    .hero{
        padding:93px 0 85px;
        position:relative;
        overflow:hidden
    }
    .hero-grid{
        display:grid;
        grid-template-columns:1.35fr .65fr;
        gap:70px;
        align-items:center
    }
    .lede{
        font-size:1.14rem;
        color:var(--muted);
        max-width:590px
    }
    .cta{
        display:inline-block;
        background:var(--primary);
        color:var(--light);
        padding:13px 24px;
        text-decoration:none;
        border-radius:3px;
        font-weight:600;
        font-size:.85rem;margin-top:15px
    }
    .cta:hover{
        background:var(--accent)
    }
    .ghost{
        border:1px solid var(--border);
        color:var(--ink);
        background:transparent;
        margin-left:7px}
        .ghost:hover{
            background:var(--panel)
        }
        .orb{
            border:1px solid var(--border);
            width:270px;
            height:270px;
            border-radius:50%;
            margin:auto;display:grid;
            place-items:center;
            position:relative
        }
        .orb:after{
            content:'';
            width:220px;
            height:220px;
            border:37px solid var(--secondary);
            border-right-color:transparent;
            opacity:.5;
            border-radius:50%;
            position:absolute;transform:rotate(25deg)
        }
        .orb:before{
            content:'';width:75px;
            height:75px;background:var(--accent);
            opacity:.62;
            border-radius:50%;
            position:absolute;
            transform:translate(50px,-45px)
        }
        section{
            padding:72px 0
        
        }
        .soft{
            background:var(--panel)
        }
        .section-intro{
            display:flex;
            gap:40px;
            align-items:end;
            justify-content:space-between;
            margin-bottom:25px
        }
        .section-intro p{
            max-width:400px;
            color:var(--muted)
        }
        .cards{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:17px
        }
        .service-card{
            background:var(--card);
            border:1px solid var(--border);
            padding:28px;
            min-height:204px
        }
        .service-card .num{
            font-family:Montserrat;
            font-size:.78rem;
            letter-spacing:.08em;
            color:var(--accent)
        }
        .service-card p{
            color:var(--muted);
            font-size:.95rem
        }
        .band{
            background:var(--primary);
            color:var(--light)
        }
        .band .eyebrow{
            color:var(--highlight)
        }
        .band p{
            max-width:640px
        }
        .grid2{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:52px
        }
        .footer{
            padding:36px 0;
            color:var(--muted);
            font-size:.83rem;
            border-top:1px solid var(--border)
        }
        .footer .wrap{
            display:flex;
            justify-content:space-between;
            gap:20px
        }
        .mini-grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:12px
        }
        .mini-panel{
            background:var(--card);
            border:1px solid var(--border);
            padding:19px
        }
        .mini-panel strong{
            font-family:Montserrat;
            font-size:.9rem
        }
        .label{
            display:block;
            font-family:Montserrat;
            font-weight:600;
            font-size:.75rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:var(--accent)
        }
        .site-header{
            padding:58px 0 35px
        }
        .site-header h1{
            font-size:clamp(2rem,4vw,3.4rem)
        
        }
        .plan-section{
            border-top:1px solid var(--border);
            padding:40px 0
        }
        .plan-section h2{
            font-size:1.6rem
        }
        .palette{display:flex;
            width:100%;
            height:94px;
            border-radius:5px;
            overflow:hidden
        }
        .swatch{
            flex:1;display:flex;
            align-items:flex-end;
            padding:8px;
            font-family:Montserrat;
            font-weight:600;
            font-size:.65rem;color:white;
            text-shadow:0 1px 3px #0007
        }
        .theme-choice{
            border:1px solid var(--border);
            padding:20px;
            background:var(--card);
            margin-bottom:16px
        }
        .theme-choice h3{
            margin-top:0
        }
        .theme-choice p{
            margin:5px;
            margin-bottom:13px
        }
        .theme-actions {
            display : flex ;
            flex-wrap : wrap ;
            gap: 9px ;
            margin-top: 12px
        }
        button , .navbutton {
            font : 600 .83rem Montserrat , sans-serif ;
            cursor : pointer ;
            padding : 10px 14px ;
            border : 1px solid var(--border) ;
            background : var(--panel) ;
            color : var(--ink) ;
            border-radius : 3px
        }
        button:hover , .navbutton:hover {
            border-color : var(--accent) ;
        }
        .site-table {
            border-collapse : collapse ;
            width : 100% ;
            font-size :.95rem
        }
        .site-table th , .site-table td {
            border-bottom :1px solid var(--border) ;
            padding :12px 10px ;
            text-align :left ;
            vertical-align :top
        }
        .site-table th {
            font-family :Montserrat ;
            font-size :.77rem ;
            text-transform :uppercase ;
            letter-spacing :.08em
        }
        .wireframe {
            display : grid ;
            grid-template-columns :2fr 1fr ;
            gap :20px
        }
        .wire {
            border :1px dashed var(--secondary) ;
            background :var(--card) ;
            padding :15px
        }
        .wire div {
            background :var(--panel) ;
            border :1px solid var(--border) ;
            padding :15px ;
            margin-bottom :9px ;
            font-size :.85rem
        }
        .wire .hero-wire {
            padding :42px 17px
        }
        .wire .three {
            display: grid;
            grid-template-columns :repeat(3, 1fr)
        }
/* Remaining site-plan and responsive rules restored */
.wire .three { gap: 6px; background: transparent; border: 0; padding: 0; }
.wire .three span { padding: 25px 7px; background: var(--panel); text-align: center; font-size: .7rem; }
.phone { max-width: 250px; margin: auto; }
.phone div { font-size: .7rem; }
.marks { display: flex; gap: 25px; flex-wrap: wrap; align-items: center; }
.mark-item { border: 1px solid var(--border); background: var(--card); padding: 23px; text-align: center; min-width: 150px; }
.mark-item svg { height: 72px; width: 72px; }
.mark-item small { display: block; color: var(--muted); }
.note { padding: 15px 18px; border-left: 3px solid var(--accent); background: var(--panel); }
@media (max-width: 800px) {
  .nav { gap: 10px; }
  .topbar .wrap { align-items: flex-start; flex-direction: column; }
  .hero-grid, .grid2, .wireframe { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .orb { width: 190px; height: 190px; }
  .orb:after { width: 140px; height: 140px; border-width: 23px; }
  .hero { padding: 58px 0; }
  .section-intro { display: block; }
  .footer .wrap { display: block; }
  .ghost { margin-left: 0; }
  .palette { height: 80px; }
  .swatch { font-size: .56rem; padding: 3px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }