*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --gold:#C9A84C;--gold-light:#E8C87A;--gold-pale:#F5E6B8;
  --gold-deep:#8B6914;--dark:#070503;
}
html,body{
  width:100%;min-height:100vh;
  color:var(--gold);
  font-family:'Cormorant Garamond',serif;
  overflow-x:hidden;
}
body{
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(201,168,76,0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 92%,  rgba(92,16,16,0.28)  0%, transparent 40%),
    radial-gradient(ellipse at 90% 92%,  rgba(92,16,16,0.28)  0%, transparent 40%),
    radial-gradient(ellipse at 50% 55%,  rgba(20,12,2,0.55)   0%, transparent 68%),
    #070503;
}
.page{display:flex;flex-direction:column;align-items:center;padding:0 10px 80px;}

/* ══ HEADER BLOCK ══ */
.header-block{
  width:100%;
  text-align:center;
  padding:36px 20px 28px;
  position:relative;
  animation:fadeDown 1.1s ease both;
  border-bottom:1px solid rgba(201,168,76,0.16);
}

/* ─ eyebrow above logo ─ */
.eyebrow{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(0.52rem,1.15vw,0.76rem);
  letter-spacing:0.52em;
  color:var(--gold-deep);
  text-transform:uppercase;
  margin-bottom:6px;
}

/* ─ fleur-de-lis row framing the logo ─ */
.fleur-row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2vw,22px);
  margin-bottom:8px;
}
.fleur-row .fr-line{
  flex:1;max-width:clamp(60px,10vw,130px);
  height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,0.35));
}
.fleur-row .fr-line.right{background:linear-gradient(to left,transparent,rgba(201,168,76,0.35));}
.fleur-row .fr-icons{
  display:flex;gap:clamp(6px,1.2vw,14px);
  font-size:clamp(1.2rem,2.4vw,1.8rem);
  color:var(--gold);
  filter:drop-shadow(0 0 10px rgba(201,168,76,0.45));
}

/* ─ logo image ─ */
.logo-img-wrap{
  display:inline-block;
  position:relative;
  margin:0 auto;
}
.logo-img-wrap img{
  width:min(580px,82vw);
  height:auto;
  display:block;
  /* filter removed — drop-shadow outlined the black box */
}

/* ─ fleur-de-lis row below logo ─ */
.fleur-row-bot{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2vw,22px);
  margin-top:8px;
}
.fleur-row-bot .fr-line{
  flex:1;max-width:clamp(60px,10vw,130px);
  height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,0.35));
}
.fleur-row-bot .fr-line.right{background:linear-gradient(to left,transparent,rgba(201,168,76,0.35));}
.fleur-row-bot .fr-icons{
  display:flex;gap:clamp(6px,1.2vw,14px);
  font-size:clamp(1rem,1.8vw,1.4rem);
  color:rgba(201,168,76,0.65);
}

/* ─ subtitle below logo ─ */
.subtitle{
  font-style:italic;
  font-size:clamp(0.9rem,2.0vw,1.2rem);
  color:var(--gold-deep);
  letter-spacing:0.22em;
  margin-top:10px;
}

/* ── DIVIDER ── */
.divider{
  display:flex;align-items:center;gap:14px;
  margin:18px auto;width:min(540px,88%);
  animation:fadeIn 1.5s ease both;
}
.div-line{flex:1;height:1px;}
.div-l{background:linear-gradient(to right,transparent,var(--gold-deep));}
.div-r{background:linear-gradient(to left,transparent,var(--gold-deep));}
.div-icon{font-size:1.05rem;color:var(--gold);letter-spacing:6px;}

/* ══ CHART CANVAS — 1100×1100 ══ */
.canvas-wrap{
  width:100%;
  position:relative;
}
.canvas{
  position:relative;
  width:1100px;
  height:1250px;
  flex-shrink:0;
  transform-origin:top left;
}
svg.bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}

/* ── CENTER NODE ── */
.node-center{
  position:absolute;
  transform:translate(-50%,-50%);
  width:clamp(154px,15.4%,196px);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#251C0A,#050402);
  border:2.5px solid var(--gold);
  box-shadow:0 0 0 8px rgba(201,168,76,0.09),0 0 55px rgba(201,168,76,0.30),inset 0 0 32px rgba(201,168,76,0.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:20;animation:centerPulse 3.8s ease-in-out infinite,fadeIn 0.7s ease both;
}
/* ── PILLAR NODE ── */
.node-pillar{
  position:absolute;transform:translate(-50%,-50%);
  width:clamp(132px,15.4%,176px);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#1E1608,#090704);
  border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(201,168,76,0.09),0 0 30px rgba(201,168,76,0.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;z-index:12;opacity:0;animation:nodeIn 0.7s ease forwards;
  transition:box-shadow 0.35s,transform 0.35s;cursor:default;
}
.node-pillar:hover{
  box-shadow:
    0 0 0 12px rgba(201,168,76,0.35),
    0 0 60px rgba(201,168,76,0.70),
    0 0 110px rgba(201,168,76,0.35),
    inset 0 0 40px rgba(201,168,76,0.18);
  transform:translate(-50%,-50%) scale(1.10);
  border-color:var(--gold-light);
}

/* ── LEAF NODE — wider boxes for larger text ── */
.node-leaf{
  position:absolute;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,rgba(201,168,76,0.08),rgba(201,168,76,0.02));
  border:1px solid rgba(201,168,76,0.32);border-radius:12px;
  padding:14px 18px;text-align:center;
  width:clamp(155px,16%,190px);
  z-index:8;opacity:0;animation:nodeIn 0.65s ease forwards;
  transition:background 0.3s,border-color 0.3s,transform 0.3s;cursor:default;
}
.node-leaf:hover{
  background:linear-gradient(135deg,rgba(201,168,76,0.28),rgba(201,168,76,0.12));
  border-color:rgba(201,168,76,0.95);
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 0 0 2px rgba(201,168,76,0.40),
    0 0 35px rgba(201,168,76,0.65),
    0 0 70px rgba(201,168,76,0.30),
    inset 0 0 20px rgba(201,168,76,0.12);
}

/* ── CENTER NODE text ── */
.c-fleur{font-size:clamp(2.4rem,4.56vw,3.36rem);line-height:1;}
.c-name{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(0.84rem,1.68vw,1.14rem);letter-spacing:0.26em;color:var(--gold-light);margin-top:4px;}
.c-sub{font-style:italic;font-size:clamp(0.53rem,1.02vw,0.70rem);color:var(--gold-deep);letter-spacing:0.1em;margin-top:2px;}

/* ── PILLAR NODE text ── */
.p-icon{font-size:clamp(1.56rem,3vw,2.16rem);}
.p-title{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(0.86rem,1.62vw,1.15rem);letter-spacing:0.22em;color:var(--gold-pale);margin-top:5px;line-height:1.15;text-shadow:0 0 18px rgba(201,168,76,0.5);}
.p-sub{font-style:italic;font-size:clamp(0.58rem,1.02vw,0.74rem);color:var(--gold-deep);margin-top:3px;letter-spacing:0.08em;}

/* ── LEAF NODE text — ALL titles same size (Alfred standard) ── */
.l-icon{font-size:clamp(1.32rem,2.4vw,1.68rem);}
.leaf-bold .l-title,
.l-title{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(0.86rem,1.5vw,1.08rem);letter-spacing:0.15em;color:var(--gold-pale);margin-top:5px;line-height:1.3;text-shadow:0 0 14px rgba(201,168,76,0.5);text-transform:uppercase;}
.leaf-bold .l-desc,
.l-desc{font-style:italic;font-size:clamp(0.76rem,1.26vw,0.94rem);color:rgba(201,168,76,0.58);margin-top:5px;line-height:1.55;}

/* ── FLEUR MIDPOINTS ── */
.fleur-mid{position:absolute;transform:translate(-50%,-50%);font-size:clamp(0.75rem,1.15vw,1rem);color:rgba(201,168,76,0.40);z-index:15;pointer-events:none;animation:fadeIn 1s ease both;text-shadow:0 0 10px rgba(201,168,76,0.3);}

/* ── LEGEND ── */
.legend{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:45px;animation:fadeIn 1s 3.2s both;}
.leg-item{display:flex;align-items:center;gap:7px;font-size:clamp(0.5rem,0.95vw,0.62rem);letter-spacing:0.14em;color:var(--gold-deep);font-family:'Cinzel',serif;}
.leg-c{width:11px;height:11px;border-radius:50%;border:1px solid var(--gold);}
.leg-r{width:11px;height:11px;border-radius:3px;border:1px solid rgba(201,168,76,0.4);}

/* ══ SACRED OATH ══ */
.oath-wrap{
  width:min(760px,92vw);margin:52px auto 0;text-align:center;
  animation:fadeIn 1.4s 3.0s both;padding:38px 44px 42px;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,0.07) 0%,transparent 60%),
    linear-gradient(160deg,rgba(20,14,4,0.82),rgba(10,7,2,0.90));
  border:1px solid rgba(201,168,76,0.22);border-radius:4px;position:relative;
}
.oath-wrap::before,.oath-wrap::after,.oath-wrap .corner-bl,.oath-wrap .corner-br{position:absolute;font-size:1.4rem;color:rgba(201,168,76,0.35);line-height:1;}
.oath-wrap::before{content:'⚜';top:14px;left:18px;}
.oath-wrap::after{content:'⚜';top:14px;right:18px;}
.oath-wrap .corner-bl{bottom:14px;left:18px;}
.oath-wrap .corner-br{bottom:14px;right:18px;}
.oath-title{font-family:'Cinzel Decorative',serif;font-size:clamp(0.55rem,1.15vw,0.78rem);letter-spacing:0.45em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:14px;}
.oath-headline{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(1rem,2.2vw,1.5rem);letter-spacing:0.25em;color:var(--gold-pale);text-shadow:0 0 30px rgba(201,168,76,0.4);margin-bottom:20px;line-height:1.3;}
.oath-divider{display:flex;align-items:center;gap:12px;margin:0 auto 22px;width:70%;}
.oath-div-line{flex:1;height:1px;background:rgba(201,168,76,0.22);}
.oath-div-icon{font-size:0.9rem;color:var(--gold-deep);letter-spacing:5px;}
.oath-text{font-style:italic;font-size:clamp(0.85rem,1.75vw,1.05rem);color:rgba(201,168,76,0.72);line-height:1.9;letter-spacing:0.04em;margin-bottom:22px;}
.oath-articles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:24px 0 26px;text-align:left;}
@media(max-width:680px){.oath-articles{grid-template-columns:1fr;}}
.oath-article{background:rgba(201,168,76,0.04);border:1px solid rgba(201,168,76,0.15);border-radius:6px;padding:14px 16px;}
.oath-art-num{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(0.48rem,0.9vw,0.62rem);letter-spacing:0.35em;color:var(--gold-deep);margin-bottom:6px;text-transform:uppercase;}
.oath-art-title{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(0.7rem,1.2vw,0.85rem);letter-spacing:0.18em;color:var(--gold-pale);margin-bottom:6px;}
.oath-art-text{font-style:italic;font-size:clamp(0.6rem,0.98vw,0.72rem);color:rgba(201,168,76,0.52);line-height:1.65;}
.oath-seal{font-size:clamp(0.75rem,1.2vw,0.82rem);letter-spacing:0.32em;color:var(--gold-deep);font-family:'Cinzel',serif;text-transform:uppercase;margin-top:6px;}

/* ── FOOTER ── */
.footer{text-align:center;margin-top:28px;max-width:680px;animation:fadeIn 1.4s 3.5s both;}
.footer blockquote{font-style:italic;font-size:clamp(0.9rem,2.1vw,1.18rem);color:var(--gold-deep);line-height:1.78;letter-spacing:0.04em;}
.footer .attrib{margin-top:10px;font-family:'Cinzel',serif;font-size:clamp(0.52rem,1vw,0.64rem);letter-spacing:0.28em;color:rgba(201,168,76,0.32);text-transform:uppercase;}

/* ── ANIMATIONS ── */
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes nodeIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.62);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes centerPulse{
  0%,100%{box-shadow:0 0 0 8px rgba(201,168,76,0.12),0 0 65px rgba(201,168,76,0.38),inset 0 0 38px rgba(201,168,76,0.10);}
  50%{box-shadow:0 0 0 18px rgba(201,168,76,0.25),0 0 100px rgba(201,168,76,0.60),inset 0 0 55px rgba(201,168,76,0.18);}
}
.conn-thick{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-dasharray:7 4;opacity:0;animation:lineIn 0.9s ease forwards;}
.conn{fill:none;stroke:var(--gold-deep);stroke-width:1.2;opacity:0;animation:lineIn 0.8s ease forwards;}
.conn-arc{fill:none;stroke:rgba(201,168,76,0.10);stroke-width:0.9;stroke-dasharray:3 8;}
.ring-d{fill:none;stroke:rgba(201,168,76,0.09);stroke-width:0.8;stroke-dasharray:2 7;}
@keyframes lineIn{from{opacity:0;stroke-dashoffset:1100;}to{opacity:0.78;stroke-dashoffset:0;}}

/* ══ RESPONSIVE — TABLET & MOBILE ══ */
.canvas-wrap{
  width:100%;
  display:flex;
  justify-content:flex-start;
}

@media(max-width:768px){
  .header-block{padding:24px 12px 18px;}
  .logo-img-wrap img{width:min(420px,88vw);}
  .eyebrow{font-size:0.55rem;letter-spacing:0.35em;}
  .subtitle{font-size:0.85rem;}
  .fleur-row .fr-icons,.fleur-row-bot .fr-icons{font-size:1rem;gap:6px;}
  .oath-wrap{padding:24px 18px 28px;}
  .oath-articles{grid-template-columns:1fr;}
  .oath-headline{font-size:1rem;}
  .legend{margin-top:20px;}
}

@media(max-width:480px){
  .logo-img-wrap img{width:min(320px,92vw);}
  .eyebrow{letter-spacing:0.22em;}
  .fleur-row .fr-icons,.fleur-row-bot .fr-icons{font-size:0.85rem;gap:4px;}
  .subtitle{font-size:0.78rem;letter-spacing:0.14em;}
  .legend{gap:14px;margin-top:14px;}
  .leg-item{font-size:0.55rem;}
  .oath-wrap{padding:18px 12px 22px;margin-top:18px;}
  .oath-title{font-size:0.5rem;}
  .oath-headline{font-size:0.85rem;}
  .oath-text{font-size:0.78rem;}
  .oath-art-title{font-size:0.72rem;}
  .oath-art-text{font-size:0.6rem;}
  .oath-seal{font-size:0.62rem;letter-spacing:0.18em;}
  .footer blockquote{font-size:0.82rem;}
}


/* ══ LOGO COLUMN — locks all header elements to logo width ══ */
.logo-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(580px, 82vw);
}
/* override header-block flex so column centers */
.header-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* fleur rows inherit column width */
.logo-column .fleur-row,
.logo-column .fleur-row-bot {
  width: 100%;
  max-width: none;
}
/* logo fills column — FILE 5 CSS exactly, just scoped to column */
.logo-column .logo-img-wrap {
  display: block;
  width: 100%;
  margin: 0;
}
.logo-column .logo-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  /* no filter — drop-shadow was outlining the black rectangle */
}

/* ══ SUBTITLE BLOCK ══ */
.subtitle-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 6px;
}

/* fleurs above words */
.sub-fleurs-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}
.sub-fleur {
  flex: 1;
  text-align: center;
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  color: rgba(201,168,76,0.65);
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.4));
}

/* words row — 3 equal columns */
.subtitle {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-style: italic;
  font-size: clamp(0.99rem, 2.2vw, 1.32rem);
  color: var(--gold);
  letter-spacing: 0.22em;
  width: 100%;
  margin-top: 0;
}
.sub-word {
  flex: 1;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(0.99rem, 2.2vw, 1.32rem); /* 10% larger than original */
  color: var(--gold);
  letter-spacing: 0.22em;
  text-shadow:
    0 0 18px rgba(201,168,76,0.75),
    0 0 35px rgba(201,168,76,0.45),
    0 0 60px rgba(201,168,76,0.25);
}
.sub-sep {
  flex: 0 0 auto;
  padding: 0 0.3em;
  color: var(--gold-deep);
}
.sub-word-mid {
  color: var(--gold);
  font-weight: 900;
}

/* shy fleurs below words */
.sub-fleurs-bot {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 5px;
}
.sub-fleur-shy {
  flex: 1;
  text-align: center;
  font-size: clamp(0.58rem, 1.0vw, 0.75rem);
  color: rgba(201,168,76,0.25);
}


/* ══ FLEUR IMAGE REPLACEMENTS ══ */

/* 5-row above/below logo */
.fleur-img {
  width: clamp(22px, 3.2vw, 36px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.5));
  vertical-align: middle;
}

/* 3 fleurs above Excellence · Loyalty · Honor */
.fleur-img-sm {
  width: clamp(14px, 2.0vw, 22px);
  height: auto;
  opacity: 0.70;
  filter: drop-shadow(0 0 5px rgba(201,168,76,0.4));
  vertical-align: middle;
}

/* shy 3 fleurs below words */
.fleur-img-shy {
  width: clamp(10px, 1.4vw, 16px);
  height: auto;
  opacity: 0.30;
  vertical-align: middle;
}


/* ══ FLEUR IMAGE — additional contexts ══ */

/* chart node icons (center, pillar, leaf) */
.fleur-img-node {
  width: clamp(28px, 3.8vw, 48px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.55));
  vertical-align: middle;
  display: block;
  margin: 0 auto;
}

/* fleur-mid markers on connection lines */
.fleur-img-mid {
  width: clamp(10px, 1.2vw, 16px);
  height: auto;
  opacity: 0.45;
  vertical-align: middle;
}

/* oath section corners + dividers */
.fleur-img-oath {
  width: clamp(14px, 1.6vw, 20px);
  height: auto;
  opacity: 0.55;
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.3));
  vertical-align: middle;
}

/* make div-icon flex so images sit on same line */
.div-icon {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 10px);
}

/* oath-div-icon inline */
.oath-div-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ══ INTENSIFIED HOVER GLOW — text + icon ══ */

/* Pillar node — title blazes on hover */
.node-pillar:hover .p-title {
  color: var(--gold-pale);
  text-shadow:
    0 0 12px rgba(201,168,76,0.95),
    0 0 28px rgba(201,168,76,0.75),
    0 0 55px rgba(201,168,76,0.50);
  transition: text-shadow 0.3s, color 0.3s;
}
.node-pillar:hover .p-icon .fleur-img-node,
.node-pillar:hover .p-icon img {
  filter:
    drop-shadow(0 0 10px rgba(201,168,76,0.95))
    drop-shadow(0 0 22px rgba(201,168,76,0.65));
  transition: filter 0.3s;
}

/* Leaf node — title + desc glow on hover */
.node-leaf:hover .l-title {
  color: var(--gold-pale);
  text-shadow:
    0 0 10px rgba(201,168,76,0.90),
    0 0 24px rgba(201,168,76,0.65),
    0 0 48px rgba(201,168,76,0.40);
  transition: text-shadow 0.3s, color 0.3s;
}
.node-leaf:hover .l-desc {
  color: rgba(201,168,76,0.88);
  transition: color 0.3s;
}
.node-leaf:hover .l-icon img {
  filter:
    drop-shadow(0 0 8px rgba(201,168,76,0.90))
    drop-shadow(0 0 18px rgba(201,168,76,0.55));
  transition: filter 0.3s;
}

/* Smooth transition base on all nodes */
.node-pillar, .node-leaf {
  transition: box-shadow 0.35s, transform 0.35s, border-color 0.35s, background 0.35s;
}