/* PHAÖRA — the galaxy theme.
   One file every page loads after its own <style>. It adds three things and
   changes nothing else about a page's own layout:
     1. a starfield behind the page (assets/theme/galaxy.js draws it),
     2. the Ö — a glowing 3D ring that floats in the top-left corner, turns a
        little as you scroll, breathes and now and then flickers, with sky
        dust drifting round it; it is the site's menu on every page,
     3. the menu itself: the Ö over the stars, the way the brand lockup is
        drawn.
   The old top bars (nav with the wordmark) and their burger menus are hidden
   here rather than deleted from 200 pages, so the change is one file to undo.
   Colours: the ice of the lockup and the existing teal. No gold. */

:root{
  --gx-ice:#DDF6FA;
  --gx-ice-2:#A9E9F0;
  --gx-glow:#5FD3DE;
  --gx-ink:#01040A;
}

/* the old bars: the site nav carries the wordmark (.nav-wm or .wm) */
body > nav:has(.nav-wm, .wm), .gx-old-nav,
.mobile-menu, .nav-burger{display:none!important}

/* ---------- the starfield ---------- */
.gx-sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
.gx-sky{opacity:0;transition:opacity 1.2s ease}
/* behind a page's content the sky has depth of field (galaxy.js): the far
   layer soft and dim, the near stars sharp. The menu's sky is all sharp. */
.gx-sky.gx-lit{opacity:1}

/* ---------- the floating Ö ---------- */
.gx-orb{position:fixed;z-index:1100;top:calc(env(safe-area-inset-top,0px) + 8px);left:clamp(10px,2.4vw,40px);
  width:56px;height:56px;padding:0;border:0;border-radius:50%;cursor:pointer;background:none;
  -webkit-tap-highlight-color:transparent;display:grid;place-items:center;transition:transform .3s}
.gx-orb:hover{transform:scale(1.06)}
.gx-orb:focus-visible{outline:1px solid var(--gx-glow);outline-offset:4px}
/* the 3D Ö is drawn on a canvas bigger than the button, so its dust can drift
   out around it; the canvas never takes a click */
.gx-orb-cv{position:absolute;left:50%;top:50%;width:168px;height:168px;transform:translate(-50%,-50%);
  pointer-events:none;transition:opacity .3s}
.gx-x{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%) rotate(-90deg);
  fill:none;stroke:var(--gx-ice);stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity .3s,transform .4s;
  filter:drop-shadow(0 0 6px rgba(95,211,222,.8))}
.gx-orb[aria-expanded="true"] .gx-orb-cv{opacity:0}
.gx-orb[aria-expanded="true"] .gx-x{opacity:1;transform:translate(-50%,-50%) rotate(0)}

/* once the page scrolls, a fade at the top so the words slide under the
   corner controls instead of running into them */
.gx-scrim{position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 92px);z-index:1085;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,16,.94) 0%,rgba(2,6,16,.82) 55%,rgba(2,6,16,0) 100%);opacity:0;transition:opacity .3s}
.gx-scrim.gx-on{opacity:1}
html.gx-open .gx-scrim{opacity:0}

/* the name beside it, at the top of the page only */
.gx-wm{position:fixed;z-index:1090;top:calc(env(safe-area-inset-top,0px) + 8px);height:56px;display:flex;align-items:center;
  left:calc(clamp(10px,2.4vw,40px) + 66px);
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:17px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gx-ice);text-decoration:none;white-space:nowrap;
  text-shadow:0 0 18px rgba(95,211,222,.35);transition:opacity .35s,transform .35s}
.gx-wm .o{color:var(--gx-glow)}
.gx-wm.gx-away{opacity:0;transform:translateX(-8px);pointer-events:none}

/* top right: Our Work, the phone, and the estimate — in sight on every page,
   so nobody has to know the Ö is a menu to find them */
.gx-right{position:fixed;z-index:1090;top:calc(env(safe-area-inset-top,0px) + 14px);right:clamp(12px,2.4vw,40px);
  display:flex;align-items:center;gap:10px}
.gx-quick,.gx-call,.gx-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  font-family:'Inter','Helvetica Neue',sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gx-ice);text-decoration:none;white-space:nowrap;transition:border-color .25s,box-shadow .25s,color .25s,background .25s}
.gx-quick,.gx-call{border:1px solid transparent;background:rgba(1,6,12,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gx-quick:hover,.gx-call:hover{border-color:rgba(95,211,222,.4);color:#fff}
.gx-call svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.gx-call span{letter-spacing:.08em}
.gx-cta{border:1px solid rgba(95,211,222,.5);background:rgba(1,6,12,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 22px rgba(95,211,222,.12)}
.gx-cta:hover{border-color:var(--gx-glow);box-shadow:0 0 28px rgba(95,211,222,.3);color:#fff}
/* the word under the Ö, so it reads as the menu */
.gx-orb-label{position:absolute;left:50%;top:calc(100% - 2px);transform:translateX(-50%);
  font-family:'Inter','Helvetica Neue',sans-serif;font-size:9px;font-weight:600;letter-spacing:.24em;padding-left:.24em;
  text-transform:uppercase;color:var(--gx-ice);text-shadow:0 0 10px rgba(1,6,12,.9),0 0 4px rgba(1,6,12,.9);pointer-events:none}
@media(max-width:900px){.gx-quick{display:none}}
/* on a phone the number becomes a round call button */
@media(max-width:620px){
  .gx-call{width:44px;padding:0;justify-content:center;border-color:rgba(95,211,222,.3)}
  .gx-call span{display:none}
  .gx-cta{padding:0 14px;letter-spacing:.16em}
}
@media(max-width:520px){.gx-wm{font-size:15px;letter-spacing:.34em}}
@media(max-width:560px){.gx-wm{display:none}}

/* ---------- the menu ---------- */
html.gx-open{overflow:hidden}
.gx-menu{position:fixed;inset:0;z-index:1080;display:flex;flex-direction:column;align-items:center;
  overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top,0px) + 72px) 24px 40px;
  background:
    radial-gradient(ellipse 36% 60% at 50% 30%,rgba(28,120,138,.26) 0%,rgba(10,60,74,.10) 46%,transparent 72%),
    radial-gradient(ellipse 90% 70% at 50% 110%,rgba(10,70,86,.22) 0%,transparent 60%),
    #01040A;
  opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s linear .45s}
.gx-menu.gx-on{opacity:1;visibility:visible;transition:opacity .45s}
.gx-menu-sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.gx-flare{position:absolute;left:50%;width:34px;height:34px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,#fff 0 1.2px,rgba(214,240,255,.55) 1.8px,rgba(150,210,255,0) 4px)}
/* a lens's cross: thin spikes that taper to nothing, white at the heart to blue at the tips */
.gx-flare::before,.gx-flare::after{content:"";position:absolute;left:50%;top:50%}
.gx-flare::before{width:34px;height:1px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,rgba(90,140,255,0),rgba(120,206,240,.45) 20%,rgba(214,240,255,.85) 39%,#fff 50%,rgba(214,240,255,.85) 61%,rgba(120,206,240,.45) 80%,rgba(90,140,255,0))}
.gx-flare::after{width:1px;height:34px;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,rgba(90,140,255,0),rgba(120,206,240,.45) 20%,rgba(214,240,255,.85) 39%,#fff 50%,rgba(214,240,255,.85) 61%,rgba(120,206,240,.45) 80%,rgba(90,140,255,0))}

.gx-menu nav{position:static;display:block;height:auto;width:auto;padding:0;margin:0;background:none;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transform:none}
.gx-menu-inner{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:520px}
.gx-mark{position:relative;width:min(400px,86vw,52vh);height:min(400px,86vw,52vh);margin:-56px 0 -48px}
.gx-mark .gx-flare{top:6%}
.gx-mark-cv{display:block;width:100%;height:100%;opacity:0;transform:scale(.9);transition:opacity .7s,transform 1.1s cubic-bezier(.2,.7,.1,1)}
.gx-on .gx-mark-cv{opacity:1;transform:none}
.gx-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(30px,6vw,46px);letter-spacing:.32em;
  padding-left:.32em;text-transform:uppercase;color:var(--gx-ice);text-shadow:0 0 30px rgba(95,211,222,.45);line-height:1}
.gx-name .o{color:#fff;text-shadow:0 0 18px rgba(95,211,222,.9)}
.gx-sub{display:flex;align-items:center;gap:18px;margin:14px 0 30px;width:100%;max-width:400px}
.gx-sub::before,.gx-sub::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(169,233,240,.55))}
.gx-sub::after{background:linear-gradient(270deg,transparent,rgba(169,233,240,.55))}
.gx-sub span{font-family:'Inter','Helvetica Neue',sans-serif;font-size:10px;font-weight:500;letter-spacing:.42em;padding-left:.42em;
  text-transform:uppercase;color:rgba(221,246,250,.72)}

.gx-links{list-style:none;margin:0;padding:0;text-align:center}
.gx-links li{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.1,1)}
.gx-on .gx-links li{opacity:1;transform:none}
.gx-links a{display:inline-block;padding:9px 6px;min-height:44px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(26px,5vw,36px);letter-spacing:.14em;color:rgba(221,246,250,.78);text-decoration:none;
  transition:color .2s,text-shadow .2s}
.gx-links a:hover,.gx-links a:focus-visible{color:#fff;text-shadow:0 0 22px rgba(95,211,222,.7);outline:none}
.gx-links a[aria-current="page"]{color:var(--gx-glow)}

.gx-menu-foot{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px;
  opacity:0;transition:opacity .6s .35s}
.gx-on .gx-menu-foot{opacity:1}
.gx-menu-cta{display:inline-flex;align-items:center;min-height:46px;padding:0 28px;border-radius:999px;
  border:1px solid rgba(95,211,222,.55);background:rgba(95,211,222,.08);color:var(--gx-ice);text-decoration:none;
  font-family:'Inter','Helvetica Neue',sans-serif;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  box-shadow:0 0 30px rgba(95,211,222,.18);transition:background .25s,box-shadow .25s}
.gx-menu-cta:hover{background:rgba(95,211,222,.18);box-shadow:0 0 40px rgba(95,211,222,.35)}
.gx-menu-line{font-family:'Inter','Helvetica Neue',sans-serif;font-size:11px;letter-spacing:.2em;color:rgba(221,246,250,.55);text-decoration:none}
.gx-menu-line:hover{color:var(--gx-ice)}

@media(prefers-reduced-motion:reduce){
  .gx-mark-cv,.gx-links li,.gx-menu,.gx-menu-foot,.gx-wm{transition:none}
}
@media print{.gx-sky,.gx-orb,.gx-wm,.gx-right,.gx-menu,.gx-scrim{display:none!important}}

/* ---------- proof: what every page can say plainly ----------
   Solid cards, not the sky: these are the facts a homeowner checks before
   calling, so they read like a contractor's paperwork, clear and steady.
   Every line is already stated elsewhere on the site; nothing here is new. */
.gx-proof{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;
  max-width:1240px;margin:0 auto;padding:clamp(28px,4vw,48px) clamp(16px,4vw,40px)}
.gx-proof-item{display:grid;grid-template-columns:28px 1fr;column-gap:12px;row-gap:4px;align-items:start;align-content:start;
  padding:18px 18px 18px 16px;border-radius:14px;background:#06111B;border:1px solid #1C3242}
.gx-proof-item svg{grid-row:1 / span 2;width:26px;height:26px;fill:none;stroke:#8FDDE6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gx-proof-item b{font-family:'Inter','Helvetica Neue',sans-serif;font-weight:600;font-size:14px;line-height:1.3;color:#F2F7FA;letter-spacing:.01em}
.gx-proof-item span{font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;line-height:1.5;color:#B9CAD4}
.gx-proof-num{grid-row:1 / span 2;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:44px;line-height:.9;
  color:#DDF6FA;text-shadow:0 0 22px rgba(95,211,222,.35)}
/* the strongest fact leads: experience, in the lockup's ice */
.gx-proof-lead{grid-column:span 2;display:flex;flex-direction:column;gap:10px;border-color:#2C5466;background:#071824}
.gx-proof-stats{display:flex;gap:22px;flex-wrap:wrap}
.gx-proof-stats>div{display:flex;align-items:center;gap:10px}
.gx-proof-stats b{max-width:7em}
@media(max-width:1100px){.gx-proof{grid-template-columns:repeat(4,minmax(0,1fr))}.gx-proof-lead{grid-column:1 / -1}}
@media(max-width:900px){.gx-proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a phone: two by two, icon above, so the four read in one glance */
@media(max-width:520px){
  .gx-proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:22px 12px}
  .gx-proof-item{grid-template-columns:1fr;row-gap:6px;padding:14px 12px}
  .gx-proof-item svg{grid-row:auto;width:22px;height:22px}
  .gx-proof-lead .gx-proof-num{font-size:38px}
  .gx-proof-stats{gap:18px}
  .gx-proof-item b{font-size:13px}
  .gx-proof-item span{font-size:12px;line-height:1.45}
}

/* ---------- recent work: real jobs, real photographs ---------- */
.gx-work{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:clamp(8px,2vw,20px) clamp(16px,4vw,40px) clamp(36px,5vw,60px)}
.gx-work-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,36px);color:#F2F7FA;margin:0 0 18px}
.gx-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gx-work-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#06111B;border:1px solid #1C3242;
  text-decoration:none;transition:border-color .2s,transform .2s}
.gx-work-card:hover{border-color:#3E9DA6;transform:translateY(-2px)}
.gx-work-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#0A1724}
.gx-work-card b{font-family:'Inter','Helvetica Neue',sans-serif;font-weight:600;font-size:15px;color:#F2F7FA;padding:14px 16px 2px}
.gx-work-card span{font-family:'Inter','Helvetica Neue',sans-serif;font-size:13px;color:#B9CAD4;padding:0 16px 16px}
.gx-work-all{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8FDDE6;text-decoration:none}
.gx-work-all:hover{color:#fff}
/* a phone: the jobs in a row you swipe, the next one peeking in */
@media(max-width:760px){
  .gx-work-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gx-work-grid::-webkit-scrollbar{display:none}
  .gx-work-card{flex:0 0 78%;scroll-snap-align:start}
}

/* ---------- finished work: a handful of the gallery's photographs ---------- */
.gx-finished{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(8px,2vw,20px) clamp(16px,4vw,40px) clamp(36px,5vw,60px)}
.gx-finished-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gx-finished-grid a{display:block;border-radius:12px;overflow:hidden;border:1px solid #1C3242;background:#0A1724}
.gx-finished-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.gx-finished-grid a:hover img{transform:scale(1.04)}
/* a phone: two by two, the first four */
@media(max-width:760px){.gx-finished-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gx-finished-grid a:nth-child(n+5){display:none}}