@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Work+Sans:wght@300;400;500&display=swap');

:root{
  --navy:#1B2A4A;
  --navy-deep:#0F1B30;
  --gold:#C2974A;
  --soft-gold:#CFBA89;
  --blue:#6E84C7;          /* cornflower: devotional body & accent */
  --blue-ink:#4C5EA0;      /* darker cornflower for small text */
  --cream:#F7F1E2;
  --paper:#FBF7EC;
  --muted:#6B6A63;
  --white:#FFFFFF;
  --ink:#2A3550;
  --title:'Playfair Display', Georgia, serif;   /* display & headings */
  --head:'Playfair Display', Georgia, serif;
  --serif:'Cormorant Garamond', Georgia, serif; /* prose, quotes, prayer */
  --body:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* labels, nav, buttons */
  --maxw:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--serif);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
/* parchment grain over the whole page (subtle paper tooth in the white space) */
body::before{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;mix-blend-mode:multiply;opacity:.4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E"),
    url("assets/img/parchment.jpg");
  background-size:170px 170px, cover;
  background-position:0 0, center;
  background-repeat:repeat, no-repeat}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.title{font-family:var(--title);font-weight:600;letter-spacing:0;color:var(--navy)}
.head{font-family:var(--head);font-weight:600;color:var(--navy);line-height:1.15}
.eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-family:var(--body);font-weight:500}
.lede{font-family:var(--serif);font-size:23px;font-style:italic;color:var(--blue-ink);line-height:1.5}
.rule{height:1px;background:var(--gold);opacity:.55}
.diamond{display:inline-flex;align-items:center;gap:12px;color:var(--gold)}
.diamond::before,.diamond::after{content:"";width:54px;height:1px;background:var(--gold)}
.spark{color:var(--soft-gold);font-family:var(--head);line-height:1;pointer-events:none}
/* engraved fleuron ornament for white space */
.fleuron{display:block;margin:0 auto;color:var(--gold);opacity:.7}
.fleuron.faint{opacity:.4}
.fleuron.ink{color:var(--blue-ink)}
/* ===== subtle Gothic accents ===== */
.arch{position:relative;overflow:hidden;border-radius:50% 50% 4px 4px / 20% 20% 4px 4px;border:1px solid rgba(199,162,78,.55)}
.arch>img{display:block;width:100%;height:100%;object-fit:cover}
.arch.tall{aspect-ratio:3/4}
/* full: show the entire (portrait) image, lightly desaturated to sit with the engravings */
.arch.full{aspect-ratio:auto}
.arch.full>img{height:auto;object-fit:contain;filter:grayscale(.6) sepia(.12) contrast(1.03)}
.tracery{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin:0 auto}
.tracery::before,.tracery::after{content:"";height:1px;background:var(--gold);opacity:.55;width:90px}
.tracery .lz{width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg)}
.tracery .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.dropcap::first-letter{font-family:var(--title);font-weight:600;font-size:3.5em;line-height:.74;float:left;color:var(--gold);margin:8px 12px 0 0}
/* gothic / framed buttons */
.btn{font-weight:500;padding:15px 32px;border:1px solid transparent}
.btn-orn::before{content:"✦";margin-right:13px;font-size:.78em;opacity:.7;vertical-align:1px}
.btn-orn::after{content:"✦";margin-left:13px;font-size:.78em;opacity:.7;vertical-align:1px}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:inset 0 0 0 2px rgba(247,241,226,.4)}
.btn-gold:hover{background:#b0863a;border-color:#b0863a}
.btn-ghost{background:transparent;border:1px solid var(--blue);color:var(--blue-ink);box-shadow:inset 0 0 0 2px rgba(110,132,199,.16)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy);box-shadow:inset 0 0 0 2px rgba(27,42,74,.14)}
/* service (about) cards */
.svc{background:var(--paper);border:1px solid rgba(27,42,74,.12);border-top:2px solid var(--gold);padding:30px 30px 28px;position:relative}
.svc .h{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.svc .rn{font-family:var(--title);font-weight:600;font-size:30px;color:var(--gold);line-height:1}
.svc .lbl{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.svc p{font-family:var(--serif);font-size:18px;color:var(--ink);line-height:1.6}
.svc .mk{position:absolute;top:22px;right:26px;color:var(--soft-gold);font-size:14px;font-family:var(--head)}
/* dark devotional moment */
.darkmoment{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;padding:60px 24px;text-align:center}
.darkmoment .marian{height:clamp(112px,13vw,156px);margin:0 auto}
.darkmoment .inv{font-family:var(--serif);font-style:italic;color:var(--soft-gold);font-size:clamp(22px,2.6vw,28px);margin-top:28px}
.darkmoment .sub{font-family:var(--serif);font-style:italic;color:#9fb0c6;font-size:14px;letter-spacing:.02em;margin-top:10px}
.watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;overflow:hidden}
.watermark img,.watermark svg{opacity:.07}

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:22px 32px}
.nav.solid{position:sticky;background:var(--cream);border-bottom:1px solid rgba(27,42,74,.12)}
.nav .brand{display:flex;align-items:center;gap:10px}
.nav .brand img{height:30px}
.nav .brand span{font-family:var(--title);font-size:12px;letter-spacing:.25em;text-transform:uppercase}
.nav .links{display:flex;gap:26px;align-items:center}
.nav .links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--body);opacity:.92}
.nav .links a:hover{color:var(--gold)}
.nav.on-dark .brand span,.nav.on-dark .links a{color:var(--white)}
.nav.on-dark .links a:hover{color:var(--soft-gold)}

/* hero: light, cream, engraved watermark */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);background:var(--cream);background-size:cover;background-position:center;overflow:hidden}
/* preview-hero (kit gallery) keeps a scrim + reversed type over its image */
#previewHero{color:#fff}
#previewHero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,48,.6),rgba(15,27,48,.45) 42%,rgba(15,27,48,.8));z-index:1}
#previewHero .inner{position:relative;z-index:2}
#previewHero h1{color:#fff}
#previewHero .invocation,#previewHero .sub{color:rgba(255,255,255,.88)}
.hero .inner{position:relative;z-index:2;padding:140px 24px 90px;max-width:860px}
.hero .invocation{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--blue-ink);margin-bottom:26px}
.hero .crest{height:clamp(112px,15vw,172px);margin:0 auto 26px}
.hero h1{font-family:var(--title);font-weight:600;letter-spacing:0;font-size:clamp(38px,6.4vw,82px);line-height:1.02;color:var(--navy)}
.hero .sub{font-family:var(--serif);font-size:clamp(18px,1.9vw,23px);color:var(--blue-ink);margin-top:18px;max-width:580px;margin-left:auto;margin-right:auto;line-height:1.5}
.hero .cta{margin-top:34px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero .rule-w{width:120px;height:1px;background:var(--gold);margin:34px auto 0}
/* sparkle accents */
.hero .spark{position:absolute;z-index:1}
/* Lepanto hero: engraved-document frame + letterhead (old-letter feel) */
.c-lepanto .hero{--frm:clamp(18px,2.6vw,36px)}
.c-lepanto .hero:not(#previewHero)::before{content:"";position:absolute;inset:var(--frm);border:1px solid rgba(199,162,78,.55);pointer-events:none;z-index:1}
.c-lepanto .hero:not(#previewHero)::after{content:"";position:absolute;inset:calc(var(--frm) + 6px);border:1px solid rgba(27,42,74,.10);pointer-events:none;z-index:1}
.c-lepanto .hero .fcorner{position:absolute;z-index:2;color:var(--gold);font-family:var(--head);font-size:15px;line-height:1;opacity:.85;pointer-events:none}
.c-lepanto .hero .fcorner.tl{top:var(--frm);left:var(--frm);transform:translate(-50%,-50%)}
.c-lepanto .hero .fcorner.tr{top:var(--frm);right:var(--frm);transform:translate(50%,-50%)}
.c-lepanto .hero .fcorner.bl{bottom:var(--frm);left:var(--frm);transform:translate(-50%,50%)}
.c-lepanto .hero .fcorner.br{bottom:var(--frm);right:var(--frm);transform:translate(50%,50%)}
.hero .hero-lede{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:13px;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.hero .hero-lede .hl-rule{width:34px;height:1px;background:rgba(199,162,78,.6)}
.hero .hero-lede .hl-dot{opacity:.55}
.hero .hero-estd{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.5vw,17px);color:var(--muted);margin-top:22px}
@media(max-width:600px){.hero .hero-lede{font-size:9.5px;letter-spacing:.16em;gap:8px}.hero .hero-lede .hl-rule{display:none}}

.btn{display:inline-block;font-family:var(--body);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:13px 28px;border:1px solid transparent;transition:.2s}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#b0863a}
.btn-ghost{border-color:var(--blue);color:var(--blue-ink)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-navy{border-color:var(--navy);color:var(--navy)}
.btn-navy:hover{background:var(--navy);color:#fff}

/* sections: all light; tonal panels instead of dark */
.section{padding:96px 0;position:relative}
.section.tight{padding:64px 0}
.section.paper,.section.navy{background:var(--paper)}
.section.deep{background:var(--cream)}
.section.center{text-align:center}
.section h2{font-family:var(--head);font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1.1;color:var(--navy)}
.section h2.gold{color:var(--gold)}
.section .kicker{margin-bottom:16px}
.section p.body{font-family:var(--serif);font-size:20px;line-height:1.7;color:var(--ink);max-width:640px}
.section p.body.blue{color:var(--blue-ink)}
.section .wrap{position:relative;z-index:2}
.center .diamond{justify-content:center}
.center p.body{margin-left:auto;margin-right:auto}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--gold);margin-top:46px}
.pillars .p{padding:30px 24px 30px;border-right:1px solid rgba(199,162,78,.4)}
.pillars .p:last-child{border-right:none}
.pillars .p .pm{font-family:var(--title);font-weight:600;font-size:15px;color:var(--gold);letter-spacing:.12em}
.pillars .p .t{font-family:var(--head);font-weight:600;font-size:21px;letter-spacing:0;text-transform:none;color:var(--navy);margin:10px 0 7px}
.pillars .p .d{font-family:var(--serif);font-size:16px;color:var(--blue-ink);line-height:1.45}
.navy .pillars .p .d,.deep .pillars .p .d{color:rgba(255,255,255,.7)}

/* feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;background:var(--paper)}
.split .img{background-size:cover;background-position:center;min-height:460px}
.split .txt{padding:72px 64px;display:flex;flex-direction:column;justify-content:center}
.split.navy .txt{background:var(--navy);color:#fff}
.split.panel .txt{background:var(--paper)}
/* ===== editorial feature (overlapping image + card) ===== */
.feature{position:relative;display:flex;align-items:stretch;min-height:580px;background:var(--paper);overflow:hidden}
.feature .feature-img{position:absolute;top:0;bottom:0;left:0;width:64%;background-size:cover;background-position:center;background-color:#efe7d3}
.feature .feature-img .cap{position:absolute;left:26px;bottom:20px;font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(15,27,48,.65);letter-spacing:.02em}
.feature .feature-panel{position:relative;z-index:2;margin-left:auto;align-self:center;width:48%;margin-right:clamp(20px,6vw,96px);background:var(--cream);border-top:2px solid var(--gold);box-shadow:-26px 0 70px rgba(27,42,74,.16);padding:70px 60px}
.feature .feature-panel h2{font-family:var(--head);font-weight:600;font-size:clamp(28px,3.2vw,40px);color:var(--navy);margin:8px 0 0;line-height:1.1}
.feature .feature-panel p.body{margin-top:18px}
.feature .feature-panel .pullrule{width:46px;height:2px;background:var(--gold);margin:28px 0 20px}
.feature .feature-panel .pull{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.1vw,26px);line-height:1.4;color:var(--navy)}
@media(max-width:860px){
  .feature{display:block;min-height:0}
  .feature .feature-img{position:relative;width:100%;height:280px}
  .feature .feature-panel{width:auto;margin:0;box-shadow:none;padding:48px 32px}
}

/* fleet */
.fleet{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px;margin-top:40px;text-align:left}
.fleet .card{position:relative;background:var(--paper);border:1px solid rgba(27,42,74,.12);border-top:2px solid var(--gold);padding:26px 24px 24px;display:flex;flex-direction:column;min-height:200px;transition:.2s}
.fleet .card:hover{box-shadow:0 14px 32px rgba(27,42,74,.1);transform:translateY(-2px)}
.fleet .card::after{content:"✦";position:absolute;top:18px;right:20px;color:var(--soft-gold);font-family:var(--head);font-size:13px}
.fleet .card .sector{font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* constant-size logo well: the box stays fixed; the logo scales to fit inside it */
.fleet .card .logo-well{height:60px;display:flex;align-items:center;justify-content:flex-start;margin:14px 0 12px}
.fleet .card .logo-well img{height:var(--lh,38px);width:auto;max-width:92%;object-fit:contain;object-position:left center;display:block}
.fleet .card .logo{font-weight:600;line-height:1.05;font-family:var(--head);font-style:italic;font-size:var(--lf,23px);color:var(--navy)}
.fleet .card .desc{font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.5;flex:1}
.fleet .card .endo{margin-top:14px;border-top:1px solid #ece4d2;padding-top:10px;display:flex;align-items:center;gap:6px;font-family:var(--title);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fleet .card .endo img{height:11px}

/* portfolio stats strip: Playfair numerals between gold hairlines */
.stats{display:flex;justify-content:center;max-width:780px;margin:34px auto 40px;
  border-top:1px solid rgba(199,162,78,.45);border-bottom:1px solid rgba(199,162,78,.45)}
.stats .stat{flex:1;padding:24px 16px;text-align:center}
.stats .stat + .stat{border-left:1px solid rgba(27,42,74,.12)}
.stats .num{font-family:var(--title);font-weight:600;font-size:44px;line-height:1;color:var(--navy);letter-spacing:.01em}
.stats .num .u{color:var(--gold);font-size:.62em;vertical-align:baseline}
.stats .lbl{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:11px}
@media(max-width:620px){.stats .num{font-size:34px}.stats .stat{padding:18px 8px}.stats .lbl{font-size:9.5px;letter-spacing:.12em}}

/* footer: light, paper with navy ink */
.footer{background:var(--paper);color:var(--ink);padding:54px 0 34px;border-top:1px solid rgba(27,42,74,.12)}
.footer .top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer .brand{display:flex;align-items:center;gap:14px}
.footer .brand img{height:54px}
.footer .brand .n{font-family:var(--head);font-size:21px;color:var(--navy)}
.footer .brand .loc{font-size:12px;color:var(--muted)}
.footer .meta{text-align:right;font-size:12px;color:var(--muted);line-height:1.9}
.footer .meta .em{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-family:var(--body);font-weight:500;font-size:11px}
.footer .base{margin-top:34px;border-top:1px solid rgba(27,42,74,.1);padding-top:18px;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:var(--body)}

/* hub hero: light */
.hub-hero{position:relative;text-align:center;padding:140px 24px 86px;background:var(--cream);color:var(--ink);overflow:hidden}
.hub-hero>*:not(.watermark){position:relative;z-index:2}
.hub-hero img.crest-mark{height:120px;margin:0 auto 24px}
.hub-hero h1{font-family:var(--title);font-weight:600;letter-spacing:0;font-size:clamp(40px,6.4vw,84px);color:var(--navy);line-height:1.02}
.hub-hero .sub{font-family:var(--serif);font-size:clamp(18px,1.9vw,23px);color:var(--blue-ink);margin-top:14px}
.concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:70px 0}
.concept-card{position:relative;overflow:hidden;border:1px solid rgba(27,42,74,.14);background:var(--paper);display:flex;flex-direction:column;transition:.25s}
.concept-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,42,74,.12)}
.concept-card .ph{height:230px;background-size:cover;background-position:center}
.concept-card .cc{padding:30px}
.concept-card .cc .n{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.concept-card .cc h3{font-family:var(--head);font-weight:600;font-size:30px;color:var(--navy);margin:6px 0 10px}
.concept-card .cc p{font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1.55}
.concept-card .cc .go{margin-top:16px;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}

/* brand kit page */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:30px}
.sw .chip{height:84px;border:1px solid rgba(27,42,74,.12)}
.sw .nm{font-family:var(--title);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-top:8px}
.sw .hex{font-size:12px;color:var(--muted)}
.logobox{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.logobox .lb{padding:34px;text-align:center;border:1px solid rgba(27,42,74,.12)}
.logobox .lb img{height:96px;margin:0 auto}
.logobox .lb.dark{background:var(--navy)}
.logobox .lb .cap{font-family:var(--title);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:18px}

@media(max-width:900px){
  .pillars,.fleet,.concepts,.swatches,.logobox{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}.split .txt{padding:48px 32px}
  .nav .links{display:none}
}
@media(max-width:560px){.pillars,.fleet,.concepts,.swatches,.logobox{grid-template-columns:1fr}}

/* ===== Brand kit (v3) ===== */
.kit-nav{position:sticky;top:0;z-index:30;background:rgba(247,242,231,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(27,42,74,.12)}
.kit-nav .row{display:flex;gap:22px;align-items:center;overflow-x:auto;padding:14px 32px;max-width:var(--maxw);margin:0 auto}
.kit-nav a{font-family:var(--title);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);white-space:nowrap;opacity:.7}
.kit-nav a:hover{opacity:1;color:var(--gold)}
.ks{padding:78px 0;border-top:1px solid rgba(27,42,74,.08)}
.ks .num{font-family:var(--title);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.ks h2{font-family:var(--head);font-weight:600;font-size:34px;color:var(--navy);margin:6px 0 6px}
.ks .intro{font-size:16px;color:var(--muted);max-width:620px;line-height:1.7;margin-bottom:34px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card-q{background:#fff;border:1px solid rgba(27,42,74,.12);padding:26px}
.card-q.dark{background:var(--navy);border-color:transparent}
.tag-lbl{font-family:var(--title);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* logo showcase */
.logo-hero{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.logo-hero .box{display:flex;align-items:center;justify-content:center;padding:46px;border:1px solid rgba(27,42,74,.12)}
.logo-hero .box.dark{background:var(--navy);border-color:transparent}
.logo-hero img{height:120px}
.mini-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.mini-logos .box{border:1px solid rgba(27,42,74,.12);padding:28px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px}
.mini-logos .box img{max-height:60px}
.mini-logos .cap{font-family:var(--title);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:16px}

.clearspace{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.clearspace .frame{border:1px dashed var(--gold);padding:34px;display:inline-block}
.clearspace .frame img{height:96px;display:block}
.minsize{display:flex;align-items:flex-end;gap:22px}
.minsize .u{text-align:center}
.minsize .u img{display:block;margin:0 auto 6px}
.minsize .u .c{font-size:11px;color:var(--muted)}

.misuse{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.misuse .m{position:relative;background:#F0E8D6;height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.misuse .m img{height:74px}
.misuse .m::after{content:"";position:absolute;top:50%;left:-8%;width:116%;height:2px;background:#B23535;transform:rotate(18deg)}
.misuse .cap{font-family:var(--title);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#B23535;margin-top:9px;text-align:center}

/* color */
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.col-card{border:1px solid rgba(27,42,74,.12);overflow:hidden}
.col-card .chip{height:120px}
.col-card .meta{padding:14px 16px}
.col-card .nm{font-family:var(--title);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.col-card .vals{font-size:12px;color:var(--muted);line-height:1.7;margin-top:6px;font-variant-numeric:tabular-nums}
.ramp{display:flex;margin-top:8px}
.ramp span{flex:1;height:40px}
.ratio{display:flex;height:46px;margin-top:10px;font-family:var(--body);font-size:12px}
.ratio div{display:flex;align-items:center;justify-content:center;letter-spacing:.1em}
.pairs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.pair{height:78px;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:18px;border:1px solid rgba(27,42,74,.1)}

/* type */
.specimen{border:1px solid rgba(27,42,74,.12);padding:28px;margin-bottom:16px}
.specimen .big{line-height:1.05;color:var(--navy)}
.specimen .glyphs{font-size:24px;letter-spacing:.06em;color:var(--navy);margin-top:14px;word-spacing:4px}
.scale-row{display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(199,162,78,.35)}
.scale-row .meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.codeblock{background:var(--navy-deep);color:#cdd7e6;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7;padding:18px 20px;border-radius:6px;overflow:auto;margin-top:14px}

/* elements */
.elt{border:1px solid rgba(27,42,74,.12);padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;text-align:center}
.elt .cap{font-family:var(--title);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:16px}
.dochip{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.do,.dont2{padding:18px;border:1px solid rgba(27,42,74,.12);font-size:14px;color:var(--ink);line-height:1.6}
.do .h,.dont2 .h{font-family:var(--title);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.do .h{color:#3B6D11}.dont2 .h{color:#B23535}

/* imagery */
.imgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.imgrid img{width:100%;height:150px;object-fit:cover}

@media(max-width:900px){
  .logo-hero,.grid2,.dochip{grid-template-columns:1fr}
  .grid3,.palette,.mini-logos,.imgrid,.misuse,.pairs{grid-template-columns:1fr 1fr}
  .scale-row{grid-template-columns:1fr}
}


/* ===== Per-concept kit pages ===== */
.kitpage{max-width:1100px;margin:0 auto;padding:0 32px}
.hint{font-size:12px;color:rgba(255,255,255,.7);font-family:var(--body);letter-spacing:.08em;margin-top:18px}
.fontset{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.fontcard{border:1px solid rgba(27,42,74,.12);padding:22px 24px;background:#fff}
.fontcard.sel{border:2px solid var(--gold);background:#fffdf6}
.fontcard .fc-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-family:-apple-system,sans-serif}
.fontcard .fc-tag{font-size:12px;color:var(--muted);margin-top:3px;font-family:-apple-system,sans-serif}
.fontcard .fc-sample{font-size:36px;color:var(--navy);margin-top:14px;line-height:1.05}
.fontcard .fc-glyph{font-size:15px;color:var(--muted);margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.imglib .group-label{display:flex;align-items:center;gap:14px;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:34px 0 12px}
.imglib .group-label:first-of-type{margin-top:6px}
.imglib .group-label::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.4}
.imglib .group-note{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:14px;margin:-4px 0 14px}
/* image-library theme carousel */
.theme-nav{display:flex;align-items:center;gap:12px;margin:18px 0 22px}
.theme-tabs{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:center}
.theme-tab{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid rgba(27,42,74,.2);border-radius:30px;padding:8px 17px;cursor:pointer;transition:.2s}
.theme-tab:hover{border-color:var(--gold);color:var(--navy)}
.theme-tab.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.theme-prev,.theme-next{flex:none;font-family:var(--head);font-size:20px;color:var(--navy);background:transparent;border:1px solid rgba(27,42,74,.2);border-radius:50%;width:40px;height:40px;cursor:pointer;line-height:1;transition:.2s}
.theme-prev:hover,.theme-next:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.theme-panel{display:none}
.theme-panel.is-active{display:block;animation:themein .45s cubic-bezier(.2,.65,.2,1)}
@keyframes themein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.theme-panel.is-active{animation:none}}
.gi{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(27,42,74,.1);cursor:pointer}
.gi img{width:100%;height:100%;object-fit:cover;transition:.3s}
.gi:hover img{transform:scale(1.05)}
.gi .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(15,27,48,.82));color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:20px 12px 9px;font-family:var(--title)}
.gi.sel{outline:3px solid var(--gold);outline-offset:-3px}
.gi .badge{position:absolute;top:8px;right:8px;background:var(--gold);color:var(--navy-deep);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;font-family:-apple-system,sans-serif}
@media(max-width:780px){.fontset{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}}

/* ===== Brand book: expanded sections ===== */
.posit{font-family:var(--head);font-weight:600;font-size:28px;color:var(--navy);line-height:1.35;max-width:780px}
.vmv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.vmv .c{background:#fff;border:1px solid rgba(27,42,74,.12);padding:22px 24px}
.vmv .c h4{font-family:var(--title);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.vmv .c p{font-size:14px;color:var(--muted);line-height:1.6}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill{font-size:12px;color:#1B2A4A;background:#EFE7D3;padding:6px 13px;border-radius:20px;font-family:var(--body)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border-top:2px solid var(--gold)}
.timeline .t{padding:20px 16px 0;position:relative}
.timeline .t::before{content:"";position:absolute;top:-8px;left:0;width:13px;height:13px;background:var(--gold);transform:rotate(45deg)}
.timeline .yr{font-family:var(--title);font-size:13px;letter-spacing:.08em;color:var(--navy)}
.timeline .tx{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:7px}
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px}
.icon-grid .ic{border:1px solid rgba(27,42,74,.12);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff}
.icon-grid .ic svg{width:40px;height:40px}
.icon-grid .ic span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-family:var(--title)}
.tbl{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}
.tbl td,.tbl th{text-align:left;padding:11px 12px;border-bottom:1px solid rgba(199,162,78,.35);color:var(--ink)}
.tbl th{font-family:var(--title);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.statio{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:22px}
.card-b{background:#fff;border:1px solid rgba(27,42,74,.12);padding:24px}
.card-b.dark{background:#1B2A4A}
.social{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:820px){.vmv,.icon-grid,.timeline,.statio,.social{grid-template-columns:1fr 1fr}}

/* ===== team ===== */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:46px;text-align:center}
.tm .avatar{width:108px;height:108px;border-radius:50%;overflow:hidden;background:var(--navy);color:var(--gold);font-family:var(--title);font-weight:600;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:inset 0 0 0 1px rgba(199,162,78,.5)}
.tm .avatar img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.tm .nm{font-family:var(--head);font-weight:600;font-size:21px;color:var(--navy)}
.tm .role{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.tm .bio{font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.5;margin-top:11px}
.tm .li{display:inline-flex;align-items:center;justify-content:center;margin-top:13px;color:var(--navy);transition:.2s}
.tm .li svg{width:20px;height:20px;display:block}
.tm .li:hover{color:var(--gold);transform:translateY(-1px)}
/* advisor: deliberately secondary */
.advisor{max-width:560px;margin:50px auto 0;text-align:center;border-top:1px solid rgba(199,162,78,.4);padding-top:24px}
.advisor .lbl{font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.advisor .aname{font-family:var(--head);font-size:18px;color:var(--navy);margin-top:7px}
.advisor .atag{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);margin-top:3px}
.advisor a{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink);margin-top:9px;display:inline-block}
.advisor a:hover{color:var(--gold)}
/* ===== latest news ===== */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px;text-align:left}
.news{background:var(--paper);border:1px solid rgba(27,42,74,.12);border-top:2px solid var(--gold);padding:0;display:flex;flex-direction:column;overflow:hidden;transition:.2s}
.news:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(27,42,74,.1)}
.news .thumb{width:100%;height:142px;object-fit:cover;display:block;background:var(--cream)}
.news .nb{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.news .tag{font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.news h3{font-family:var(--head);font-weight:600;font-size:20px;color:var(--navy);line-height:1.22;margin:10px 0 8px}
.news p{font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.5;flex:1}
.news .go{margin-top:14px;font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
@media(max-width:900px){.team,.newsgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team,.newsgrid{grid-template-columns:1fr}}

/* Legal Disclaimer Section */
.legal-disclaimer {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.legal-disclaimer p {
  margin-bottom: 12px;
}
.legal-disclaimer h4 {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

/* ===== premium motion & interactions ===== */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .8s cubic-bezier(.2,.65,.2,1);will-change:opacity,transform}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}
/* scroll progress bar */
#scrollbar{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),var(--soft-gold));z-index:60;transition:width .08s linear}
/* animated nav underline */
.nav .links a{position:relative}
.nav .links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--gold);transition:width .3s ease}
.nav .links a:hover::after,.nav .links a[aria-current="page"]::after{width:100%}
/* button + card micro-lifts */
.btn{transition:.2s ease}
.btn-gold:hover,.btn-navy:hover,.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,42,74,.16)}
.concept-card,.fleet .card,.prod,.col-card{will-change:transform}
/* hero crest: gentle settle on load */
.hero .crest,.hub-hero img.crest-mark{animation:crestin 1.1s cubic-bezier(.2,.65,.2,1) both}
@keyframes crestin{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .reveal-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .hero .crest,.hub-hero img.crest-mark{animation:none}
  #scrollbar{display:none}
  html{scroll-behavior:auto}
}

/* ===== Premium polish ===== */
/* Crisper serif rendering across engines */
body{-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* On-brand text selection */
::selection{background:var(--gold);color:var(--navy)}

/* Accessible, on-brand keyboard focus (no ring on mouse clicks) */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* ===== Fine-press details (engraved/heritage refinement) ===== */
/* Old-style figures + ligatures in serif prose for a typeset, heritage feel */
body{font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
.section p.body,.svc p,.tm .bio,.news p,.feature .feature-panel .pull,.feature .feature-panel p.body,.advisor .atag,.hero .invocation,.hero .sub,.qplate p{font-feature-settings:"kern" 1,"liga" 1,"onum" 1,"pnum" 1}

/* Engraved kicker: a short gold rule leads every section label (flanks when centered) */
.kicker{display:inline-flex;align-items:center;gap:12px}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.center .kicker::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}

/* Tactile gold hover on cards */
.fleet .card:hover{border-color:rgba(199,162,78,.5)}
.fleet .card::after{transition:transform .25s,color .25s}
.fleet .card:hover::after{color:var(--gold);transform:scale(1.18)}
.news .go{transition:color .2s,letter-spacing .2s}
.news:hover .go{color:var(--gold);letter-spacing:.18em}
.tm .avatar{transition:box-shadow .25s,transform .25s}
.tm:hover .avatar{box-shadow:inset 0 0 0 2px var(--gold);transform:translateY(-3px)}

/* Framed testimonial plate (echoes the hero's engraved frame) */
.qplate{position:relative;padding:clamp(38px,5vw,66px) clamp(26px,6vw,80px);border:1px solid rgba(199,162,78,.42)}
.qplate::before{content:"";position:absolute;inset:7px;border:1px solid rgba(27,42,74,.08);pointer-events:none}
.qplate .fcorner{position:absolute;z-index:2;color:var(--gold);font-family:var(--head);font-size:13px;line-height:1;opacity:.85;pointer-events:none}
.qplate .fcorner.tl{top:0;left:0;transform:translate(-50%,-50%)}
.qplate .fcorner.tr{top:0;right:0;transform:translate(50%,-50%)}
.qplate .fcorner.bl{bottom:0;left:0;transform:translate(-50%,50%)}
.qplate .fcorner.br{bottom:0;right:0;transform:translate(50%,50%)}
.qplate .qrole{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin-top:4px}

/* Footer colophon flourish */
.footer .colophon{margin-top:36px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold)}
.footer .colophon::before,.footer .colophon::after{content:"";height:1px;width:70px;background:var(--gold);opacity:.5}
.footer .colophon .lz{width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}
.footer .base{margin-top:18px;border-top:none;padding-top:0}

/* In-page anchor targets clear the sticky nav when jumped to */
[id]{scroll-margin-top:96px}

/* Mobile: keep the primary nav usable instead of hiding the links */
@media(max-width:900px){
  .nav{flex-wrap:wrap;padding:14px 18px;row-gap:8px}
  .nav .links{display:flex!important;width:100%;justify-content:center;flex-wrap:wrap;gap:10px 16px;margin-top:6px}
  .nav .links a{font-size:11px;letter-spacing:.14em}
}