/* The Aldus skin over the cloned layout.
   Layout, spacing and motion are unchanged. Only palette and type move. */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root{
  --al-ink:#10161D;        /* page black, warmer than their navy */
  --al-ink-800:#17212C;
  --al-ink-700:#1E2B3A;
  --al-blue:#2B4763;       /* Aldine blue */
  --al-gold:#C3A15E;       /* the accent */
  --al-gold-soft:#D8BC86;
  --al-cream:#F2EADA;
  --al-vellum:#F4EEE2;
}

/* --- surfaces ------------------------------------------------------- */
.bg-ink,.bg-ink-900{background-color:var(--al-ink)!important}
.bg-ink-800{background-color:var(--al-ink-800)!important}
.bg-ink-700\/50{background-color:rgba(30,43,58,.5)!important}
.bg-ink-700\/60{background-color:rgba(30,43,58,.6)!important}
.bg-ink-900\/80{background-color:rgba(16,22,29,.8)!important}
.bg-cream{background-color:var(--al-vellum)!important}
.bg-cream\/20{background-color:rgba(244,238,226,.2)!important}
body{background-color:var(--al-ink)}

/* --- accent: their electric blue and pink become Aldine gold -------- */
.text-blue,.text-blue-200,.text-pink{color:var(--al-gold)!important}
.text-blue\/80{color:rgba(195,161,94,.8)!important}
.bg-blue,.bg-pink{background-color:var(--al-gold)!important;color:var(--al-ink)!important}
.bg-blue\/10{background-color:rgba(195,161,94,.10)!important}
.bg-blue\/15{background-color:rgba(195,161,94,.15)!important}
.bg-blue\/25{background-color:rgba(195,161,94,.25)!important}
.bg-pink\/10{background-color:rgba(195,161,94,.10)!important}
.border-blue,.border-pink{border-color:var(--al-gold)!important}
.border-blue\/30,.border-pink\/30{border-color:rgba(195,161,94,.34)!important}
[class*="from-blue"]{--tw-gradient-from:var(--al-gold) var(--tw-gradient-from-position)!important}
[class*="via-blue"]{--tw-gradient-via:rgba(195,161,94,.35)!important}
[class*="to-blue"]{--tw-gradient-to:var(--al-gold-soft) var(--tw-gradient-to-position)!important}
[class*="from-ink"]{--tw-gradient-from:rgba(16,22,29,.35) var(--tw-gradient-from-position)!important}
[class*="via-ink"]{--tw-gradient-via:rgba(16,22,29,.6)!important}
.text-gradient-blue{background-image:linear-gradient(90deg,var(--al-gold),var(--al-gold-soft))!important;
  -webkit-background-clip:text;background-clip:text;color:transparent!important}
.glow-blue{box-shadow:0 0 0 1px rgba(195,161,94,.18),0 30px 90px -40px rgba(195,161,94,.35)!important}

/* --- text ----------------------------------------------------------- */
.text-cream{color:var(--al-cream)!important}
.text-cream\/90{color:rgba(242,234,218,.9)!important}
.text-cream\/85{color:rgba(242,234,218,.85)!important}
.text-cream\/75{color:rgba(242,234,218,.75)!important}
.text-cream\/65{color:rgba(242,234,218,.65)!important}
.text-cream\/60{color:rgba(242,234,218,.6)!important}
.text-cream\/55{color:rgba(242,234,218,.55)!important}
.text-cream\/40{color:rgba(242,234,218,.42)!important}
.text-ink{color:#1B1A17!important}
.text-ink\/80{color:rgba(27,26,23,.8)!important}
.text-ink\/65{color:rgba(27,26,23,.66)!important}
.text-ink\/45{color:rgba(27,26,23,.5)!important}
.border-ink-900\/10{border-color:rgba(27,26,23,.12)!important}

/* --- type ----------------------------------------------------------- */
.font-display,h1,h2,.text-5xl,.text-6xl,.text-7xl{font-family:"Instrument Serif",Georgia,serif!important;
  font-weight:400!important;letter-spacing:-.01em}
h1,h2{text-wrap:balance}
.font-body,body,p,li{font-family:Manrope,system-ui,sans-serif}
.font-mono,[class*="font-mono"]{font-family:"JetBrains Mono",ui-monospace,monospace!important}

/* --- the form we put where their booking calendar was --------------- */
.aldus-cta{background:var(--al-blue);color:#fff;border:0;cursor:pointer;
  transition:background .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}
.aldus-cta:hover{background:#22384E}
.aldus-cta:active{transform:translateY(1px)}
.aldus-cta:focus-visible{outline:3px solid var(--al-gold);outline-offset:3px}
form input:focus{border-color:var(--al-blue)!important;box-shadow:0 0 0 3px rgba(43,71,99,.15)}

/* their sticky header swapped background with JS we removed; pin it instead */
.aldus-nav{background:rgba(16,22,29,.92)!important;backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(195,161,94,.14)}
.aldus-nav .text-ink,.aldus-nav a{color:var(--al-cream)!important}
.aldus-nav .bg-blue,.aldus-nav .aldus-cta{color:var(--al-ink)!important}

/* sweep the rest of their accent palette into Aldine gold */
.border-pink,.border-pink\/25,.border-pink\/30,.border-pink\/50,.ring-pink{border-color:rgba(195,161,94,.4)!important}
.bg-pink,.bg-pink\/10,.bg-pink\/20{background-color:rgba(195,161,94,.14)!important}
.bg-pink{background-color:var(--al-gold)!important}
.text-pink,.text-pink-light,.text-\[\#C8FF00\]{color:var(--al-gold)!important}
.hover\:bg-pink:hover{background-color:var(--al-gold)!important}
.hover\:text-white:hover{color:var(--al-ink)!important}
.hover\:border-pink:hover{border-color:var(--al-gold)!important}
.animate-pulse-pink{animation:none!important}
.glow-pink{box-shadow:0 0 0 1px rgba(195,161,94,.18),0 30px 90px -40px rgba(195,161,94,.35)!important}
[class*="shadow-pink"],[class*="shadow-blue"]{--tw-shadow-color:rgba(195,161,94,.35)!important}

/* ---------- mobile ---------- */
html{scroll-behavior:smooth;scroll-padding-top:84px}

@media (max-width:767px){
  /* stop iOS zooming the page when a field is tapped */
  input,select,textarea{font-size:16px!important}
  /* thumb-sized targets */
  a,button{min-height:44px}
  /* their desktop rhythm is too airy on a phone */
  section{padding-top:56px!important;padding-bottom:56px!important}
  /* the headline runs to three lines on a phone, so tighten it */
  h1{font-size:clamp(34px,10.5vw,44px)!important;line-height:1.08!important}
  h2{font-size:clamp(26px,7.5vw,32px)!important;line-height:1.14!important}
  /* decorative glows that spill past the viewport */
  .overflow-x-clip,body{overflow-x:hidden}
  [class*="-inset-8"],[class*="-inset-10"],[class*="w-[800px]"]{max-width:100vw!important}
  /* big dead space under cards on small screens */
  [class*="min-h-screen"]{min-height:auto!important}
}

/* the mobile menu panel, driven by the small script at the end of the page */
#menu-panel{transition:opacity .35s cubic-bezier(.32,.72,0,1)}
#menu-panel.opacity-100{opacity:1!important;pointer-events:auto!important}
#menu-btn{cursor:pointer}
/* keep the focus ring for keyboards, not for taps */
#menu-btn:focus{outline:none}
#menu-btn:focus-visible{outline:3px solid var(--al-gold);outline-offset:2px}

/* ---------- motion ---------- */
.will-reveal{opacity:0;transform:translateY(64px);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.32,.72,0,1),transform .9s cubic-bezier(.32,.72,0,1),filter .9s cubic-bezier(.32,.72,0,1)}
.will-reveal.shown{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .will-reveal{opacity:1!important;transform:none!important;filter:none!important}
  html{scroll-behavior:auto}
}

/* the hero is drawn now, not a photograph */
#hero-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}

/* ---------- the tagline moment ---------- */
.tagline-section{background:var(--al-ink);padding:96px 24px}
.tagline-inner{max-width:680px;margin:0 auto}
.tagline-reveal{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(36px,5.6vw,60px);line-height:1.1;letter-spacing:-.015em;text-wrap:balance;margin:0}
.tagline-reveal .tw{color:rgba(242,234,218,.28);
  transition:color .7s cubic-bezier(.32,.72,0,1)}
.tagline-reveal .tw.lit{color:var(--al-cream)}
@media (max-width:767px){.tagline-section{padding:64px 20px}}

/* ---------- hamburger morphs to an X ---------- */
#menu-btn svg{transition:opacity .4s cubic-bezier(.32,.72,0,1)}
#menu-btn.is-open svg{opacity:0}
#menu-btn{position:relative}
#menu-btn:before,#menu-btn:after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2px;
  background:var(--al-cream);opacity:0;border-radius:2px;
  transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s cubic-bezier(.32,.72,0,1)}
#menu-btn.is-open:before{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}
#menu-btn.is-open:after{opacity:1;transform:translate(-50%,-50%) rotate(-45deg)}
#menu-panel{transition:opacity .5s cubic-bezier(.32,.72,0,1)}
#menu-panel.is-open{opacity:1!important;pointer-events:auto!important}
#menu-panel a{opacity:0;transform:translateY(48px);
  transition:opacity .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1)}
#menu-panel.is-open a{opacity:1;transform:none}
#menu-panel.is-open a:nth-child(1){transition-delay:.10s}
#menu-panel.is-open a:nth-child(2){transition-delay:.15s}
#menu-panel.is-open a:nth-child(3){transition-delay:.20s}
#menu-panel.is-open a:nth-child(4){transition-delay:.25s}
#menu-panel.is-open a:nth-child(5){transition-delay:.30s}

/* ---------- states the clone never had ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--al-gold);color:var(--al-ink);
  padding:12px 16px;border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0}
.field-bad{border-color:#B4543F!important;box-shadow:0 0 0 3px rgba(180,84,63,.15)!important}
.legal-row{display:flex;gap:24px;margin-top:16px}
.legal-row a{font-size:13px;color:rgba(242,234,218,.5);text-decoration:none}
.legal-row a:hover{color:var(--al-cream)}
a:focus-visible,button:focus-visible{outline:3px solid var(--al-gold);outline-offset:3px;border-radius:4px}

/* ---------- catch every remaining accent, whatever its opacity ---------- */
[class*="text-blue"]{color:var(--al-gold)!important}
[class*="text-blue/"]{color:rgba(195,161,94,.8)!important}
[class*="border-blue"]{border-color:rgba(195,161,94,.4)!important}
/* solid only when it is the solid class; every fractional variant stays a wash */
.bg-blue{background-color:var(--al-gold)!important}
[class*="bg-blue/"]{background-color:rgba(195,161,94,.14)!important}
[class*="bg-blue/9"],[class*="bg-blue/8"]{background-color:rgba(195,161,94,.92)!important}
[class*="hover:text-blue"]:hover{color:var(--al-gold)!important}
[class*="hover:border-blue"]:hover{border-color:var(--al-gold)!important}
.text-gradient-blue,.text-gradient-blue-strong{
  background-image:linear-gradient(90deg,var(--al-gold),var(--al-gold-soft))!important;
  -webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ---------- the cards had no life in them ---------- */
.card-glass,[class*="rounded-2xl"][class*="border"]{
  transition:transform .6s cubic-bezier(.32,.72,0,1),border-color .6s cubic-bezier(.32,.72,0,1),
             box-shadow .6s cubic-bezier(.32,.72,0,1)}
main section [class*="rounded-2xl"][class*="border"]:hover,
main section [class*="rounded-3xl"][class*="border"]:hover{
  transform:translateY(-4px);border-color:rgba(195,161,94,.34)!important;
  box-shadow:0 24px 70px -30px rgba(195,161,94,.4)}

/* a thin gold rule that draws itself across the top of each card */
main section [class*="rounded-2xl"][class*="border"]{position:relative}
main section [class*="rounded-2xl"][class*="border"]:before{
  content:"";position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(195,161,94,.65),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 1.1s cubic-bezier(.32,.72,0,1)}
main section [class*="rounded-2xl"][class*="border"].shown:before,
main section .shown [class*="rounded-2xl"][class*="border"]:before{transform:scaleX(1)}
main section [class*="rounded-2xl"][class*="border"]:hover:before{transform:scaleX(1)}

/* ---------- paper, because this is a printer's brand ---------- */
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay}

/* ---------- the odd one out in a three column grid ---------- */
@media (min-width:1024px){
  .grid.lg\:grid-cols-3 > *:nth-child(4):nth-last-child(2){grid-column:span 1}
  .grid.lg\:grid-cols-3 > *:last-child:nth-child(5){grid-column:span 1}
}

/* eyebrow labels were flat grey; give them the gold they were meant to have */
.tracking-label,[class*="tracking-\[0.18em\]"],[class*="tracking-label"]{color:var(--al-gold)!important}
.badge-ink{color:var(--al-ink)!important;font-weight:700}
/* product screenshots should be legible, not atmospheric */
img[src*="example-dashboard"]{filter:none!important;opacity:1!important}

/* a five card grid should not leave a hole in the last row */
@media (min-width:1024px){
  .grid.lg\:grid-cols-3 > *:nth-child(4):nth-last-child(2),
  .grid.lg\:grid-cols-3 > *:nth-child(5):last-child{grid-column:span 1}
  .grid.lg\:grid-cols-3:has(> *:nth-child(5):last-child) > *:nth-child(4),
  .grid.lg\:grid-cols-3:has(> *:nth-child(5):last-child) > *:nth-child(5){
    grid-column:span 1;justify-self:stretch}
}
.form-note{font-size:13px;margin:0;min-height:18px;text-align:center}
.form-note-ok{color:#2F6B4A}
.form-note-bad{color:#B4543F}
form button[disabled]{opacity:.6;cursor:progress}