:root{
  --navy:#0b1726;
  --navy2:#14263b;
  --navy3:#1b3147;
  --paper:#fbf8f1;
  --cream:#f2ece1;
  --gold:#c8a55d;
  --gold2:#dbc482;
  --red:#ff3b30;
  --ink:#14202b;
  --muted:#68737c;
  --serif:"Libre Caslon Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1260px,calc(100% - 64px));margin:auto}
.kicker{
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:#8e6b31;
}
.sectionTitle{
  font:400 clamp(44px,5.3vw,78px)/.95 var(--serif);
  letter-spacing:-.043em;
  margin:12px 0 0;
}

/* =========================================================
   HERO — HUMAN FIRST, PUBLISHER SECOND
   ========================================================= */
.hero{
  background:var(--paper);
  min-height:92vh;
  padding:34px 0 78px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:28px;
  border-bottom:1px solid rgba(11,23,38,.11);
}
.brand{font:400 24px var(--serif);color:var(--navy)}
.route{
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7b858d;
}
.heroGrid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:72px;
  align-items:center;
  padding-top:62px;
}
.heroCopy h1{
  margin:14px 0 24px;
  max-width:820px;
  font:400 clamp(60px,7.4vw,112px)/.89 var(--serif);
  letter-spacing:-.052em;
  color:var(--navy);
}
.heroCopy h1 em{font-style:italic;color:#9d783a}
.heroLead{
  max-width:680px;
  margin:0;
  color:#58646d;
  font-size:15px;
  line-height:1.76;
}
.heroLead strong{color:var(--navy);font-weight:600}
.heroProof{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:38px;
  border-top:1px solid rgba(11,23,38,.12);
  border-bottom:1px solid rgba(11,23,38,.12);
}
.heroProof div{padding:20px 18px 21px 0}
.heroProof div+div{border-left:1px solid rgba(11,23,38,.1);padding-left:20px}
.heroProof b{
  display:block;
  font:400 34px/1 var(--serif);
  color:#9d783a;
}
.heroProof span{
  display:block;
  margin-top:7px;
  font-size:8.5px;
  line-height:1.45;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#7a858d;
}
.portrait{
  min-height:580px;
  position:relative;
  overflow:hidden;
  background:var(--navy);
}
.portrait img{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:center 34%;
}
.portrait:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(11,23,38,.87) 100%);
}
.portraitCaption{
  position:absolute;
  z-index:2;
  left:30px;
  right:30px;
  bottom:27px;
  color:#fff;
}
.portraitCaption b{
  display:block;
  font:400 30px var(--serif);
}
.portraitCaption span{
  display:block;
  margin-top:5px;
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#c5cdd3;
}

/* =========================================================
   SECTION 2 — THE JOURNEY, BUT COMPACT
   ========================================================= */
.journey{
  background:var(--navy);
  color:#fff;
  padding:102px 0 108px;
}
.journeyHead{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:86px;
  align-items:end;
  margin-bottom:62px;
}
.journey .kicker{color:var(--gold2)}
.journey h2{
  font:400 clamp(46px,5.4vw,80px)/.94 var(--serif);
  letter-spacing:-.043em;
  margin:12px 0 0;
}
.journeyHead p{
  margin:0;
  max-width:670px;
  color:#b5c0c8;
  font-size:14px;
  line-height:1.72;
}
.timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.moment{
  min-height:270px;
  padding:29px 24px 34px;
  border-right:1px solid rgba(255,255,255,.14);
}
.moment:last-child{border-right:0}
.moment .year{
  font:400 30px/1 var(--serif);
  color:var(--gold2);
}
.moment h3{
  margin:27px 0 10px;
  font:400 24px/1.06 var(--serif);
  color:#fff;
}
.moment p{
  margin:0;
  color:#9eabb4;
  font-size:11px;
  line-height:1.58;
}
.journeyStatement{
  margin:52px 0 0;
  max-width:880px;
  font:400 clamp(28px,3.1vw,43px)/1.17 var(--serif);
  color:#ece8df;
}
.journeyStatement em{font-style:italic;color:var(--gold2)}

/* =========================================================
   SECTION 3 — THE TURNING POINT
   ========================================================= */
.turn{
  background:var(--cream);
  padding:104px 0 106px;
}
.turnGrid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:86px;
  align-items:center;
}
.turn h2{
  font:400 clamp(46px,5.6vw,82px)/.94 var(--serif);
  letter-spacing:-.044em;
  margin:12px 0 20px;
}
.turn p{
  max-width:560px;
  margin:0;
  color:#5e6870;
  font-size:14px;
  line-height:1.73;
}
.turnQuote{
  background:var(--paper);
  border-left:2px solid var(--gold);
  padding:42px 46px;
}
.turnQuote p{
  margin:0;
  color:#28343d;
  font:400 clamp(29px,3.1vw,43px)/1.19 var(--serif);
}
.turnQuote span{
  display:block;
  margin-top:22px;
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8d7347;
}

/* =========================================================
   SECTION 4 — METHOD = THE VISUAL CENTERPIECE
   ========================================================= */
.method{
  background:var(--paper);
  padding:108px 0 116px;
}
.methodHead{
  max-width:930px;
  margin:0 auto 66px;
  text-align:center;
}
.methodHead h2{
  font:400 clamp(54px,6.4vw,94px)/.91 var(--serif);
  letter-spacing:-.047em;
  margin:13px 0 20px;
}
.methodHead p{
  max-width:700px;
  margin:0 auto;
  color:#606c74;
  font-size:14px;
  line-height:1.73;
}
.methodFlow{
  display:grid;
  grid-template-columns:1fr 72px 1fr 72px 1fr;
  align-items:center;
}
.methodCard{
  min-height:260px;
  padding:34px 30px;
  color:#fff;
  background:var(--navy);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.methodCard:nth-child(3){background:var(--navy2)}
.methodCard:nth-child(5){background:var(--navy3)}
.methodCard small{
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9eabb5;
}
.methodCard b{
  display:block;
  font:400 clamp(34px,4vw,54px)/1 var(--serif);
  color:var(--gold2);
}
.methodCard p{
  max-width:270px;
  margin:0;
  color:#b9c3ca;
  font-size:11px;
  line-height:1.56;
}
.arrow{text-align:center;color:#9d7a3e;font-size:27px}
.methodVariants{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:32px;
}
.variant{
  border:1px solid rgba(11,23,38,.12);
  padding:23px 25px;
  background:#fffdf8;
}
.variant span{
  display:block;
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#876b3e;
}
.variant strong{
  display:block;
  margin-top:8px;
  font:400 26px/1.1 var(--serif);
  color:var(--navy);
}
.methodConclusion{
  max-width:850px;
  margin:42px auto 0;
  text-align:center;
  color:#33404a;
  font:400 25px/1.3 var(--serif);
}

/* =========================================================
   SECTION 5 — PUBLISHING BRAND / PROOF
   ========================================================= */
.publisher{
  background:var(--navy);
  color:#fff;
  padding:101px 0 108px;
}
.publisherGrid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:76px;
  align-items:center;
}
.publisher .kicker{color:var(--gold2)}
.publisher h2{
  margin:12px 0 20px;
  font:400 clamp(44px,5.2vw,76px)/.95 var(--serif);
  letter-spacing:-.043em;
}
.publisherCopy p{
  max-width:550px;
  margin:0;
  color:#abb7c0;
  font-size:13px;
  line-height:1.7;
}
.brandMetrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:31px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.brandMetrics div{padding:21px 16px 22px 0}
.brandMetrics div+div{padding-left:19px;border-left:1px solid rgba(255,255,255,.12)}
.brandMetrics b{
  font:400 36px/1 var(--serif);
  color:var(--gold2);
}
.brandMetrics span{
  display:block;
  margin-top:7px;
  color:#8f9da7;
  font-size:8.5px;
  line-height:1.42;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.catalogue{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:11px;
  align-items:end;
}
.catalogue img{
  width:100%;
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}
.catalogue img:nth-child(2),
.catalogue img:nth-child(5){transform:translateY(-18px)}

/* =========================================================
   SECTION 6 — TRUST / CLOSE
   ========================================================= */
.close{
  background:var(--paper);
  padding:106px 0 104px;
}
.closeGrid{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:86px;
  align-items:end;
}
.close h2{
  margin:12px 0 20px;
  max-width:800px;
  font:400 clamp(48px,5.8vw,84px)/.94 var(--serif);
  letter-spacing:-.045em;
}
.close p{
  max-width:670px;
  margin:0;
  color:#606b73;
  font-size:14px;
  line-height:1.73;
}
.signatureBlock{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:30px;
  padding-top:25px;
  border-top:1px solid rgba(11,23,38,.12);
}
.signatureBlock img{
  width:118px;
  height:auto;
  object-fit:contain;
}
.signatureMeta b{
  display:block;
  font:400 26px var(--serif);
}
.signatureMeta span{
  display:block;
  margin-top:4px;
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#78838b;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:155px;
  padding:16px 20px;
  border:1px solid var(--navy);
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:700;
}
.btn.primary{background:var(--navy);color:#fff}
.btn.red{border-color:var(--red);color:var(--red)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:980px){
  .wrap{width:min(100% - 34px,1260px)}
  .heroGrid,.journeyHead,.turnGrid,.publisherGrid,.closeGrid{grid-template-columns:1fr;gap:38px}
  .portrait{min-height:500px}
  .timeline{grid-template-columns:1fr 1fr}
  .moment{border-bottom:1px solid rgba(255,255,255,.14)}
  .methodFlow{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg);padding:11px 0}
  .catalogue{grid-template-columns:repeat(3,1fr);gap:14px}
  .actions{justify-content:flex-start}
}
@media(max-width:640px){
  .hero{padding-bottom:66px}
  .heroGrid{padding-top:48px}
  .heroCopy h1{font-size:55px}
  .heroProof{grid-template-columns:1fr 1fr 1fr}
  .portrait{min-height:430px}
  .journey,.turn,.method,.publisher,.close{padding:76px 0}
  .timeline{grid-template-columns:1fr}
  .moment{min-height:auto;border-right:0}
  .methodVariants{grid-template-columns:1fr}
  .catalogue{grid-template-columns:repeat(3,1fr);gap:8px}
  .signatureBlock{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   ABOUT DEX — VISUAL REFINEMENTS
   1) Circular gold-rim portrait in hero
   2) Six book covers arranged around a circle
   ========================================================= */

/* ---------- HERO PORTRAIT ---------- */
.portrait{
  min-height:0 !important;
  background:transparent !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  padding:20px 0 !important;
}

.portrait:after{
  display:none !important;
}

.portrait img{
  position:static !important;
  width:290px !important;
  height:290px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center 34% !important;
  border:4px solid var(--gold) !important;
  box-shadow:
    0 0 0 10px rgba(200,165,93,.10),
    0 20px 55px rgba(11,23,38,.14) !important;
}

.portraitCaption{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:-38px !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  text-align:center !important;
  color:var(--navy) !important;
}

.portraitCaption b{
  font-size:24px !important;
  color:var(--navy) !important;
}

.portraitCaption span{
  color:#727f88 !important;
  white-space:nowrap;
}

/* ---------- BOOK CIRCLE ---------- */
.publisherGrid{
  grid-template-columns:.88fr 1.12fr !important;
  gap:70px !important;
}

.catalogue{
  position:relative !important;
  width:min(560px,100%) !important;
  aspect-ratio:1 / 1 !important;
  display:block !important;
  margin:0 auto !important;
  min-height:520px !important;
}

.catalogue:before{
  content:"";
  position:absolute;
  inset:17%;
  border:1px solid rgba(219,196,130,.28);
  border-radius:50%;
}

.catalogue:after{
  content:"DEX\A SAUNIER\A PUBLISHING";
  white-space:pre;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:148px;
  height:148px;
  border-radius:50%;
  border:1px solid rgba(219,196,130,.48);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--gold2);
  font:400 20px/1.2 var(--serif);
  letter-spacing:.03em;
  background:rgba(11,23,38,.72);
  box-shadow:0 0 0 12px rgba(255,255,255,.018);
}

.catalogue img{
  position:absolute !important;
  width:116px !important;
  height:auto !important;
  margin:0 !important;
  transform-origin:center center !important;
  box-shadow:0 16px 34px rgba(0,0,0,.34) !important;
  transition:transform .25s ease, box-shadow .25s ease;
}

.catalogue img:hover{
  z-index:5;
  box-shadow:0 22px 48px rgba(0,0,0,.42) !important;
}

/* Six covers around the orbit */
.catalogue img:nth-child(1){
  left:50%; top:1%;
  transform:translateX(-50%) rotate(-4deg) !important;
}
.catalogue img:nth-child(2){
  right:4%; top:24%;
  transform:rotate(8deg) !important;
}
.catalogue img:nth-child(3){
  right:10%; bottom:6%;
  transform:rotate(5deg) !important;
}
.catalogue img:nth-child(4){
  left:10%; bottom:6%;
  transform:rotate(-5deg) !important;
}
.catalogue img:nth-child(5){
  left:4%; top:24%;
  transform:rotate(-8deg) !important;
}
.catalogue img:nth-child(6){
  left:50%; bottom:1%;
  transform:translateX(-50%) rotate(4deg) !important;
}

/* Slight outward lift on hover without breaking the circular composition */
.catalogue img:nth-child(1):hover{transform:translateX(-50%) translateY(-7px) rotate(-4deg) scale(1.04) !important;}
.catalogue img:nth-child(2):hover{transform:translate(6px,-4px) rotate(8deg) scale(1.04) !important;}
.catalogue img:nth-child(3):hover{transform:translate(6px,5px) rotate(5deg) scale(1.04) !important;}
.catalogue img:nth-child(4):hover{transform:translate(-6px,5px) rotate(-5deg) scale(1.04) !important;}
.catalogue img:nth-child(5):hover{transform:translate(-6px,-4px) rotate(-8deg) scale(1.04) !important;}
.catalogue img:nth-child(6):hover{transform:translateX(-50%) translateY(7px) rotate(4deg) scale(1.04) !important;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .portrait{
    margin-bottom:42px !important;
  }

  .portrait img{
    width:250px !important;
    height:250px !important;
  }

  .publisherGrid{
    grid-template-columns:1fr !important;
  }

  .catalogue{
    width:min(520px,100%) !important;
    min-height:500px !important;
  }
}

@media(max-width:640px){
  .portrait img{
    width:210px !important;
    height:210px !important;
    border-width:3px !important;
  }

  .portraitCaption{
    bottom:-34px !important;
  }

  .portraitCaption span{
    white-space:normal !important;
    max-width:240px;
  }

  .catalogue{
    width:100% !important;
    min-height:390px !important;
  }

  .catalogue img{
    width:82px !important;
  }

  .catalogue:after{
    width:112px;
    height:112px;
    font-size:15px;
  }

  .catalogue img:nth-child(2){right:1%;}
  .catalogue img:nth-child(3){right:5%;}
  .catalogue img:nth-child(4){left:5%;}
  .catalogue img:nth-child(5){left:1%;}
}


/* =========================================================
   ABOUT DEX — STANDALONE PAGE NAVIGATION
   ========================================================= */

/* Top-left publishing name becomes the permanent home exit. */
.topbar .brand{
  display:inline-flex;
  align-items:center;
  transition:color .2s ease, opacity .2s ease;
}
.topbar .brand:hover{
  color:#9d783a;
}
.topbar .brand:after{
  content:"↗";
  margin-left:8px;
  font:500 10px/1 var(--sans);
  opacity:.42;
  transform:translateY(-1px);
}

/* Bottom exit area */
.close .actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  justify-content:stretch !important;
  min-width:370px;
}

.close .actions .btn{
  width:100%;
}

.close .backHome{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:3px;
  border-top:1px solid rgba(11,23,38,.14);
  border-bottom:1px solid rgba(11,23,38,.14);
  color:#67737c;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:color .2s ease, background .2s ease;
}

.close .backHome:hover{
  color:var(--navy);
  background:#f3eee4;
}

/* Floating back-to-top: same visual language as the main site */
.backToTop{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:100;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:#FFD84D;
  color:#0b1726;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 21px/1 var(--sans);
  cursor:pointer;
  box-shadow:0 10px 28px rgba(11,23,38,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.backToTop.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.backToTop:hover{
  box-shadow:0 14px 34px rgba(11,23,38,.25);
  transform:translateY(-2px);
}

.backToTop:focus-visible{
  outline:2px solid #0b1726;
  outline-offset:3px;
}

@media(max-width:700px){
  .topbar{
    gap:18px;
  }

  .topbar .route{
    text-align:right;
  }

  .close .actions{
    min-width:0;
    width:100%;
    grid-template-columns:1fr !important;
  }

  .close .backHome{
    grid-column:1 !important;
  }

  .backToTop{
    right:16px;
    bottom:16px;
    width:43px;
    height:43px;
  }
}