/* ==========================================================================
   AES ATOM — mark button + floating Atom Geometry panel
   Loads after aes.css. Adds only; changes nothing already in aes.css.
   To remove entirely: delete this file, aes-atom.js, and the two tags
   per page that reference them.
   ========================================================================== */

:root{
  /* Cherenkov blue — was teal #3FD3CE / #B4E0E1 */
  --atom-glow:#3E7BF5;
  --atom-ring:#9DC6FF;
}

/* ==========================================================================
   1. THE MARK BUTTON
   Replaces the old .wm watermark. Same slot, same anchor point, but at
   full opacity and carrying an engraved bezel so it reads as a control.
   The old .rhero .wm rule is left untouched and simply goes unused.
   ========================================================================== */

.aes-mark-btn{
  position:absolute; right:3.5%; top:50%;
  transform:translateY(-50%);
  width:300px; aspect-ratio:2.045 / 1;
  display:block; padding:0; border:0; background:none;
  cursor:pointer; isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.aes-mark-btn:hover{ transform:translateY(-50%) scale(1.035); }
.aes-mark-btn:active{ transform:translateY(-50%) scale(.995); }

/* --- halo canvas: behind the bezel, never intercepts the pointer -------- */
.aes-mark-btn__atom{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:4; pointer-events:none; opacity:0;   /* over the mark, not behind */
  transition:opacity .18s linear;
}
.aes-mark-btn.is-live .aes-mark-btn__atom{ opacity:1 }

/* --- engraved bezel -----------------------------------------------------
   Same light logic as the button face: shadow above, catch below, so the
   ring reads as cut into the panel rather than sitting on it.            */
.aes-mark-btn__bezel{
  position:absolute; inset:-9% -4.5%;
  border-radius:50%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(24,42,62,.34) 0%, rgba(8,16,26,.56) 54%, rgba(18,34,50,.30) 100%);
  box-shadow:
    inset 0 4px 9px rgba(0,0,0,.92),          /* groove wall, top    */
    inset 0 -3px 3px rgba(0,0,0,.34),
    inset 0 -1px 0 rgba(222,236,252,.42),     /* light catch, bottom */
    inset 0 0 0 1px rgba(150,180,220,.14),
    0 14px 30px rgba(0,0,0,.46);
  transition:box-shadow .28s ease;
}
/* chrome lip sitting just inside the groove */
.aes-mark-btn__bezel::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  box-shadow:
    inset 0 1px 0 rgba(236,244,252,.30),
    inset 0 -1px 0 rgba(0,0,0,.58),
    0 -1px 0 rgba(0,0,0,.55),
    0 1px 0 rgba(222,236,252,.18);
}
.aes-mark-btn:hover .aes-mark-btn__bezel{
  box-shadow:
    inset 0 4px 9px rgba(0,0,0,.92),
    inset 0 -3px 3px rgba(0,0,0,.34),
    inset 0 -1px 0 rgba(222,236,252,.52),
    inset 0 0 0 1px rgba(62,123,245,.30),
    inset 0 0 26px rgba(62,123,245,.13),
    0 14px 30px rgba(0,0,0,.46),
    0 0 34px rgba(62,123,245,.26);
}

/* <picture> adds a wrapper; keep it out of the layout so the mark button's
   geometry is unchanged. */
.aes-mark-btn picture{ display:contents }

/* --- the mark itself ----------------------------------------------------
   No opacity reduction and no dimming filter. The drop-shadows add
   definition against the marble without darkening the artwork.           */
.aes-mark-btn__img{
  position:relative; z-index:2;
  display:block; width:100%; height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 20px rgba(255,201,139,.34))
    drop-shadow(0 3px 7px rgba(0,0,0,.62));
}

/* --- hover caption: discoverability without idle clutter --------------- */
.aes-mark-btn__cap{
  position:absolute; left:50%; bottom:-13%;
  transform:translateX(-50%) translateY(4px);
  z-index:3; pointer-events:none; white-space:nowrap;
  font-family:"Share Tech Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--atom-ring);
  opacity:0; transition:opacity .24s ease, transform .24s ease;
}
.aes-mark-btn:hover .aes-mark-btn__cap,
.aes-mark-btn:focus-visible .aes-mark-btn__cap{
  opacity:.92; transform:translateX(-50%) translateY(0);
}

.aes-mark-btn:focus-visible{ outline:2px solid var(--atom-glow); outline-offset:8px; border-radius:50%; }

/* --------------------------------------------------------------------------
   Keep the title block clear of the mark.
   .rhero h1 and its siblings had no width limit, so any title long enough
   ran underneath the 300px mark button sitting at right:3.5%. Constraining
   them makes the title wrap onto a second line instead of colliding.
   -------------------------------------------------------------------------- */
.rhero .wrap > .spec,
.rhero .wrap > h1,
.rhero .wrap > .thesis,
.rhero .wrap > .pos{
  max-width:calc(100% - 350px);   /* 300px mark + 3.5% inset + a 32px gap */
}

/* Below this width the mark is hidden, so the full column is available. */
@media(max-width:760px){
  .aes-mark-btn{ display:none }
  .rhero .wrap > .spec,
  .rhero .wrap > h1,
  .rhero .wrap > .thesis,
  .rhero .wrap > .pos{ max-width:100% }
}


/* ==========================================================================
   2. THE ATOM GEOMETRY WINDOW

   Restyled to the settings-page system used by admin/orbital-buttons.php:
   grouped cards with an Orbitron eyebrow, a sentence of context under the
   heading, then rows of label-with-live-value, a line of help, and a
   slider paired with a number box. Colours use the picker-plus-hex pair
   from the same page.

   Anchored to the LEFT of the window. The Specifications box therefore
   opens to the RIGHT of the panel: it used to sit on the left, which
   would now push it off the edge of the screen.
   ========================================================================== */

.aes-ap{
  position:fixed; z-index:500;
  top:60px; left:32px; width:430px; max-width:calc(100vw - 32px);
  background:rgba(10,20,32,.94);
  border:1px solid rgba(201,212,224,.18); border-radius:10px;
  box-shadow:0 26px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter:blur(9px);
  font-family:"Rajdhani",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#C9D4E0;
  opacity:0; transform:translateY(-8px) scale(.985);
  transition:opacity .2s ease, transform .2s ease;
}
.aes-ap[hidden]{ display:none }
.aes-ap.is-open{ opacity:1; transform:none }

/* ---- title bar, also the drag handle ---- */
.aes-ap__bar{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px 13px 16px;
  border-bottom:1px solid rgba(201,212,224,.13);
  cursor:grab; user-select:none;
  border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,rgba(27,49,69,.55),rgba(12,24,38,.3));
}
.aes-ap__bar:active{ cursor:grabbing }
.aes-ap__bar h2{
  margin:0; flex:1;
  font-family:"Orbitron",sans-serif; font-weight:800;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--atom-ring);
  text-shadow:0 -1px 1px rgba(0,0,0,.85),0 1px 0 rgba(210,222,236,.24);
}
.aes-ap__x{
  border:1px solid rgba(201,212,224,.2); background:rgba(255,255,255,.03);
  color:#C9D4E0; border-radius:5px; cursor:pointer;
  width:26px; height:26px; line-height:1; font-size:15px;
  display:grid; place-items:center; transition:border-color .18s,color .18s;
}
.aes-ap__x:hover{ border-color:var(--atom-glow); color:#EAF4FF }

.aes-ap__body{ padding:16px; max-height:min(94vh,940px); overflow-y:auto }

/* ---- live sample, the same idea as the preview on the settings page ---- */
.aes-ap__stage{
  position:relative; display:grid; place-items:center;
  margin:0 0 14px; padding:18px 0 0;
  border:1px solid var(--line,rgba(201,212,224,.16)); border-radius:8px;
  background:rgba(255,255,255,.02);
}
.aes-ap__demo{
  position:relative; isolation:isolate; z-index:1;
  border:1px solid rgba(150,180,220,.18); border-radius:6px;
  background:linear-gradient(180deg,#1b2740,#0d1524);
  color:#DAE2EE; cursor:pointer;
  font-family:"Orbitron",sans-serif; font-weight:800;
  font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:10px 22px;
  box-shadow:inset 0 1px 0 rgba(190,215,245,.2), inset 0 -1px 0 rgba(0,0,0,.6);
}
.aes-ap__demo canvas{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:3; pointer-events:none; opacity:0; transition:opacity .18s linear;
}
.aes-ap__demo.is-live canvas{ opacity:1 }
.aes-ap__stagecap{
  margin:14px 0 0; padding:9px 0 10px; width:100%; text-align:center;
  border-top:1px solid rgba(201,212,224,.09);
  font-family:"Share Tech Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#7C8794;
}

/* ---- the plain-English note, matching .howto on the settings pages ---- */
.aes-ap__note{
  border:1px solid rgba(62,123,245,.34); border-left:3px solid #3E7BF5;
  border-radius:7px; background:rgba(62,123,245,.06);
  padding:14px 16px; margin:0 0 16px;
}
.aes-ap__note h3{
  font-family:"Orbitron",sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:#9DC6FF; margin:0 0 9px;
}
.aes-ap__note p{ margin:0 0 8px; font-size:14px; line-height:1.55; color:#C9D4E0 }
.aes-ap__note p:last-child{ margin-bottom:0 }
.aes-ap__note b{ color:#EAF4FF; font-weight:600 }
.aes-ap__note .aes-ap__warn{ color:#FFCFA8 }

/* ---- the setting cards ---- */
.aes-ap__cards{ display:grid; gap:14px }
.aes-ap__card{
  border:1px solid rgba(201,212,224,.16); border-radius:8px;
  padding:16px 18px 18px; background:rgba(255,255,255,.02);
}
.aes-ap__card h3{
  font-family:"Orbitron",sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:#9DC6FF; margin:0 0 6px;
}
.aes-ap__cardnote{
  margin:0 0 15px; font-size:13px; line-height:1.5; color:#8FA3B8;
}

.aes-ap__row{
  margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid rgba(201,212,224,.09);
}
.aes-ap__row:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0 }
.aes-ap__row label{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:14px; color:#C9D4E0; margin-bottom:4px;
}
.aes-ap__row label b{
  font-family:"Share Tech Mono",ui-monospace,monospace; font-size:13px;
  color:#9DC6FF; font-weight:400; white-space:nowrap;
}
.aes-ap__rowhelp{
  margin:0 0 9px; font-size:12.5px; line-height:1.5; color:#8794A4;
}

.aes-ap__sliderow{ display:flex; align-items:center; gap:10px }
.aes-ap__sliderow input[type=range]{
  flex:1; accent-color:var(--atom-glow); margin:0; height:16px; min-width:0;
}
.aes-ap__num{
  width:88px; flex:none; text-align:right;
  background:rgba(4,12,22,.8);
  border:1px solid rgba(201,212,224,.22); border-radius:4px; color:#EAF2FB;
  font-family:"Share Tech Mono",ui-monospace,monospace;
  font-size:12.5px; padding:5px 7px; outline:none;
  -moz-appearance:textfield;
  transition:border-color .16s, box-shadow .16s;
}
.aes-ap__num::-webkit-outer-spin-button,
.aes-ap__num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.aes-ap__num:hover{ border-color:rgba(201,212,224,.36) }
.aes-ap__num:focus{
  border-color:var(--atom-glow); box-shadow:0 0 0 2px rgba(62,123,245,.18);
}

.aes-ap__colrow{ display:flex; align-items:center; gap:10px }
.aes-ap__colrow input[type=color]{
  width:52px; height:32px; flex:none; padding:0; border-radius:5px;
  border:1px solid rgba(201,212,224,.22); background:none; cursor:pointer;
}
.aes-ap__colrow input[type=text]{
  width:110px; text-align:left; background:rgba(4,12,22,.8);
  border:1px solid rgba(201,212,224,.22); border-radius:4px; color:#EAF2FB;
  font-family:"Share Tech Mono",ui-monospace,monospace;
  font-size:12.5px; padding:5px 7px; outline:none;
}
.aes-ap__colrow input[type=text]:focus{
  border-color:var(--atom-glow); box-shadow:0 0 0 2px rgba(62,123,245,.18);
}

/* ---- action buttons ---- */
.aes-ap__acts{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px }
.aes-ap__acts button{
  flex:1 1 auto;
  font-family:"Share Tech Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 11px; border-radius:5px; cursor:pointer;
  border:1px solid rgba(201,212,224,.2);
  background:rgba(255,255,255,.03); color:#C9D4E0;
  transition:border-color .18s,color .18s,background .18s;
}
.aes-ap__acts button:hover{ border-color:var(--atom-glow); color:#EAF4FF }
.aes-ap__acts button[aria-pressed=true]{
  border-color:var(--atom-glow); color:#A6C8FF; background:rgba(62,123,245,.09);
}
.aes-ap__acts--wide{ margin-top:7px }
.aes-ap__acts--wide button{ flex:1 1 100% }

/* --------------------------------------------------------------------------
   TWO COLUMNS ON A WIDE WINDOW.
   The cards run in one column by default. Given the horizontal room they
   run in two, which roughly halves the height of the settings block and
   keeps the whole window inside a 760px-tall viewport without shrinking a
   single point of type.
   -------------------------------------------------------------------------- */
@media (min-width:1180px) and (min-height:640px){
  .aes-ap{ width:760px }
  .aes-ap__cards{ grid-template-columns:1fr 1fr; column-gap:16px; align-items:start }
}

/* --------------------------------------------------------------------------
   SPECIFICATIONS — a separate box, to the RIGHT of the panel.
   A child of .aes-ap, so it tracks the panel when the panel is dragged.
   -------------------------------------------------------------------------- */
.aes-spec{
  position:absolute; top:0; left:calc(100% + 12px);
  width:520px;
  background:rgba(10,20,32,.96);
  border:1px solid rgba(201,212,224,.18); border-radius:10px;
  box-shadow:0 26px 70px rgba(0,0,0,.62);
  backdrop-filter:blur(9px);
  padding:12px;
}
.aes-spec[hidden]{ display:none }
.aes-spec header{
  font-family:"Orbitron",sans-serif; font-weight:800;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--atom-ring);
  margin-bottom:11px;
  text-shadow:0 -1px 1px rgba(0,0,0,.85),0 1px 0 rgba(210,222,236,.24);
}
/* Standing note. Deliberately NOT the engraved uppercase face used for the
   parameters — 425 characters of Orbitron 800 caps is close to unreadable.
   Sentence case in the body face, sized to sit under the data rather than
   compete with it. */
.aes-spec__note{
  font-family:"Rajdhani",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500; font-size:14px; line-height:1.5; letter-spacing:.01em;
  color:var(--atom-ring);
  margin:0 0 21px;
  padding-bottom:21px;
  border-bottom:1px solid rgba(201,212,224,.14);
}
.aes-spec textarea{
  width:100%; display:block; resize:vertical;
  min-height:200px;
  /* matched to "AES LTD · ARCHITECTURE & ENGINEERING SERVICES LIMITED"
     in the index footer — Orbitron 800 / 12.5px / uppercase / engraved */
  font-family:"Orbitron",sans-serif; font-weight:800;
  font-size:12.5px; line-height:1.7; letter-spacing:.05em;
  text-transform:uppercase;
  text-shadow:0 -1px 1px rgba(0,0,0,.85),0 -2px 2px rgba(0,0,0,.5),
              0 1px 0 rgba(210,222,236,.28),0 2px 2px rgba(210,222,236,.12);
  color:#7C8794; background:rgba(4,12,22,.85);
  border:1px solid rgba(201,212,224,.22); border-radius:5px;
  padding:11px 12px; outline:none;
}
.aes-spec textarea:focus{
  border-color:var(--atom-glow); box-shadow:0 0 0 2px rgba(62,123,245,.18);
}
.aes-spec button{
  margin-top:7px; width:100%;
  font-family:"Share Tech Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 11px; border-radius:5px; cursor:pointer;
  border:1px solid rgba(201,212,224,.2);
  background:rgba(255,255,255,.03); color:#C9D4E0;
  transition:border-color .18s,color .18s;
}
.aes-spec button:hover{ border-color:var(--atom-glow); color:#EAF4FF }

/* Not enough room to the right of a 760px panel — drop it underneath. */
@media(max-width:1340px){
  .aes-spec{ position:static; width:auto; margin-top:10px; box-shadow:none }
}

@media(max-width:520px){
  .aes-ap{ left:12px; right:12px; width:auto; top:72px }
  .aes-ap__body{ padding:13px }
  .aes-ap__card{ padding:14px 15px 15px }
}
@media (prefers-reduced-motion:reduce){
  .aes-ap,.aes-mark-btn,.aes-mark-btn__atom,.aes-mark-btn__bezel,.aes-mark-btn__cap{
    transition:none
  }
}

/* ==========================================================================
   3. HALO ON EVERY ACTIONABLE CONTROL
   The canvas is injected by aes-atom.js as the first child and painted
   ABOVE the control. Additive teal on mostly-transparent pixels, so the
   label still reads through it; pointer-events stay off so the control
   underneath keeps working normally.
   ========================================================================== */

.aes-atomic{
  position:relative;      /* no offsets — introduces no layout shift */
  isolation:isolate;      /* keeps the negative z-index inside this control */
}

.aes-atom-cv{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:3; pointer-events:none; opacity:0;
  transition:opacity .18s linear;
}
.aes-atomic.is-live > .aes-atom-cv{ opacity:1 }

/* Nav items sit in a 74px bar, so keep their bloom from swamping the page
   behind. The halo still reads; it just stops short of the fold. */
header.nav .aes-atomic .aes-atom-cv{ opacity:0 }
header.nav .aes-atomic.is-live .aes-atom-cv{ opacity:.9 }

@media (prefers-reduced-motion:reduce){
  .aes-atom-cv{ transition:none }
}


/* ==========================================================================
   4. HERO SPACING  (index.html)
   The source PNG carried 15.3% dead space above the mark and 20.3% below.
   That artwork padding is now cropped out of aes-hero-scene-trim.png, so
   the gap is set here in CSS rather than baked into the image.

   Gap = ONE QUARTER of one line of the "Civil & structurally led."
   heading — its font-size clamp x its 1.14 line-height x 0.25.
   REV02 used the full line height; this is 25% of that.

   The container narrows from 50% to 45% purely to compensate for the
   cropped padding — the mark itself renders at exactly the size it did
   before. Widen it back to 50% if you want the mark 11% larger.
   ========================================================================== */

:root{
  --aes-hero-line: calc(clamp(13px, 3.05vw, 44px) * 1.14);
  --aes-hero-gap:  calc(var(--aes-hero-line) * 0.25);
}

.hero-scene{
  width:min(45%, 864px);
  margin-top:var(--aes-hero-gap);
  margin-bottom:var(--aes-hero-gap);
}
@media(max-width:900px){ .hero-scene{ width:min(77.4%, 864px) } }

/* was padding:6px 28px 84px — the 6px would otherwise add to the gap */
.hero-in{ padding-top:0 }


/* ==========================================================================
   5. SPLASH ORBITAL AND IRIS TRANSITION

   NOTE ON SPECIFICITY. index.html carries an inline <style
   id="aes-splash-critical"> block that appears AFTER this stylesheet is
   linked. At equal specificity the inline block wins on source order, so
   every rule here is prefixed with `html` to raise it to (1,1,1) and beat
   the inline (1,1,0). Without that prefix none of this applies at all —
   the slide-up, the plate background and the vignette all survive.
   ========================================================================== */

html #aesSplash{ background-image:none; background-color:transparent }
html #aesSplash::before{ content:none }        /* vignette moves to the plate */
html #aesSplash.exit{ transform:none }         /* no slide, under any path */
html #aesSplash{ transition:none }             /* and nothing to slide with */

html #aesSplash .s-plate{
  position:absolute; inset:0; z-index:1;
  background:url("marble.jpg") center/cover no-repeat #10202F;
}
html #aesSplash .s-plate::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(55% 50% at 50% 50%, rgba(0,0,0,0) 0%, rgba(30,38,48,.32) 100%);
}

/* The circle. A transparent hole is punched at the atom's centre and grown
   outward, so the page beneath is uncovered the way a lens opens. Driven
   frame by frame from the implosion and then the explosion. */
html #aesSplash.iris .s-plate{
  -webkit-mask-image:radial-gradient(circle at var(--ix) var(--iy),
      rgba(0,0,0,0) 0 var(--iris), #000 calc(var(--iris) + 3px));
          mask-image:radial-gradient(circle at var(--ix) var(--iy),
      rgba(0,0,0,0) 0 var(--iris), #000 calc(var(--iris) + 3px));
}

/* The specular sweep — a white diagonal stripe crossing the mark from top
   left to bottom right, fired by aes.js adding .sweep at 1500 ms. Removed
   at source: the element exists for nothing else, so hiding it stops both
   the stripe and its animation. Prefixed with html to beat the inline
   critical block, as with everything else in this section. */
html #aesSplash .s-shine{ display:none }

html #aesSplash .s-atom{ position:absolute; inset:0; z-index:2; pointer-events:none }
html #aesSplash .s-logo{ z-index:3; transform-origin:50% 50% }

/* The artwork is now cropped to the oval, so the element box and the oval
   share a centre. The container narrows to compensate, keeping the mark at
   the size it rendered before: 1349/1536 of the old width. */
html #aesSplash .s-logo{ width:min(734px, 65vw) }
/* <picture> introduces a wrapper element; make it transparent to layout so
   the logo box is still the image box. */
html #aesSplash .s-logo picture{ display:block; width:100% }
html #aesSplash.iris .s-logo{ transition:none }

html #aesSplash.iris .strip,
html #aesSplash.iris .s-halo,
html #aesSplash.iris .tag{ opacity:0; transition:opacity .28s ease }


/* Owner entry point at the foot of the About page. Matched to the footer
   signature line — Orbitron 800 / 12.5px / .05em / uppercase / engraved. */
.owner-link{
  max-width:1180px; margin:0 auto; padding:0 28px 26px;
  font-family:"Orbitron",sans-serif; font-weight:800;
  font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  text-align:right;
}
.owner-link a{
  color:#7C8794; transition:color .2s;
  text-shadow:0 -1px 1px rgba(0,0,0,.85),0 -2px 2px rgba(0,0,0,.5),
              0 1px 0 rgba(210,222,236,.28),0 2px 2px rgba(210,222,236,.12);
}
.owner-link a:hover{ color:var(--atom-ring) }