:root{
  --paper:#f4efe7;
  --paper-soft:#f8f4ee;
  --ink:#1f2326;
  --ink-soft:rgba(31,35,38,.74);
  --ink-faint:rgba(31,35,38,.48);
  --gold:#b48f46;
  --gold-soft:rgba(180,143,70,.58);
  --line:rgba(31,35,38,.11);
  --line-strong:rgba(31,35,38,.15);
  --shadow:0 18px 48px rgba(68,55,33,.08);
}

*,
*::before,
*::after{box-sizing:border-box}

*{margin:0}

html{
  min-height:100%;
  background:var(--paper);
  color-scheme:light;
  overflow-x:hidden;
}

body{
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 76% 34%,rgba(255,255,255,.68),transparent 27rem),
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.74),transparent 24rem),
    linear-gradient(180deg,#f8f4ee 0%,#f3ede4 48%,#ede5da 100%);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

::selection{background:rgba(180,143,70,.22)}

.site-frame{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto auto auto;
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.25rem;
  padding:clamp(.78rem,1.35vh,1.05rem) clamp(1rem,2vw,2rem) 0;
  position:relative;
  z-index:10;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.82rem;
  min-width:0;
}

.brand-mark{
  width:3.35rem;
  height:3.95rem;
  object-fit:contain;
  flex:0 0 auto;
}

.brand-type{
  display:grid;
  gap:.12rem;
  font-family:Cinzel,Georgia,serif;
  text-transform:uppercase;
  color:rgba(31,35,38,.91);
  line-height:1;
  text-align:center;
}

.brand-type>span{
  font-size:1.48rem;
  letter-spacing:.35em;
  text-indent:.35em;
}

.brand-type small{
  font-size:.52rem;
  letter-spacing:.52em;
  text-indent:.52em;
  color:var(--gold);
  justify-self:center;
  position:relative;
  padding-inline:1.35rem;
}

.brand-type small::before,
.brand-type small::after{
  content:"";
  position:absolute;
  top:50%;
  width:1rem;
  height:1px;
  background:var(--gold-soft);
}

.brand-type small::before{left:0}
.brand-type small::after{right:0}

.top-links{
  display:flex;
  align-items:center;
  gap:.95rem;
  padding-top:.48rem;
  font-family:Cinzel,Georgia,serif;
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

.top-links span{
  width:1px;
  height:.86rem;
  background:var(--gold-soft);
}

.top-links a{
  position:relative;
  padding-bottom:.3rem;
  transition:color .25s ease;
}

.top-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:.25em;
  bottom:0;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}

.top-links a:hover,
.top-links a:focus-visible{
  color:var(--ink);
  outline:none;
}

.top-links a:hover::after,
.top-links a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}

.main{
  padding:0 clamp(1rem,2vw,2rem);
}

.hero{
  display:grid;
  grid-template-columns:minmax(0,55rem) minmax(18rem,1fr);
  gap:clamp(1.4rem,4.6vw,5rem);
  align-items:stretch;
  margin:0 0 clamp(.65rem,1.45vh,1rem);
}

.hero-copy{
  min-width:0;
  max-width:55rem;
  padding:clamp(1rem,2.4vh,1.65rem) 0 clamp(1rem,2.2vh,1.55rem) .9rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.kicker{
  font-family:Cinzel,Georgia,serif;
  text-transform:uppercase;
  color:var(--gold);
  font-size:.68rem;
  letter-spacing:.21em;
  line-height:1.35;
  white-space:nowrap;
  margin:0 0 .42rem;
}

.kicker-name,
.kicker-title{display:inline}

.kicker-title::before{content:" · "}

h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;
  font-size:clamp(5.25rem,7vw,7.15rem);
  line-height:.82;
  letter-spacing:-.075em;
  color:var(--ink);
  margin:0 0 .85rem;
}

h1 em{
  font-style:italic;
  letter-spacing:-.09em;
}

h1 span{color:var(--gold)}

.lead{
  font-size:clamp(1.08rem,1.28vw,1.24rem);
  line-height:1.48;
  color:var(--ink-soft);
  max-width:50rem;
  margin:0 0 .9rem;
}

.lead strong{
  color:var(--ink);
  font-weight:600;
}

.supporting{
  font-size:clamp(.98rem,1.05vw,1.06rem);
  line-height:1.55;
  color:var(--ink-faint);
  max-width:49rem;
  margin:0;
}

.credibility{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  width:fit-content;
  max-width:100%;
  border-top:1px solid var(--line);
  padding-top:.76rem;
  margin-top:.95rem;
  gap:.55rem .88rem;
  font-family:Cinzel,Georgia,serif;
  font-size:clamp(.62rem,.76vw,.70rem);
  letter-spacing:clamp(.09em,.14vw,.16em);
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

.cred-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:.52rem;
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  padding-right:.88rem;
}

.cred-item::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:.9rem;
  background:var(--gold-soft);
  transform:translateY(-50%);
}

.cred-item:last-child{
  padding-right:0;
}

.cred-item:last-child::after{display:none}

.cred-item img{
  width:.95rem;
  height:.95rem;
  object-fit:contain;
  flex:0 0 auto;
}

.actions{
  margin-top:.92rem;
  display:flex;
  align-items:center;
  gap:1.05rem;
  flex-wrap:wrap;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.96rem 1.3rem;
  background:#202427;
  color:#f7f2ea;
  border:1px solid rgba(180,143,70,.45);
  box-shadow:var(--shadow);
  font-family:Cinzel,Georgia,serif;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.cta:hover,
.cta:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 22px 55px rgba(68,55,33,.14);
  background:#1b1f22;
  outline:none;
}

.note-wrap{
  display:flex;
  align-items:flex-start;
  gap:.48rem;
  position:relative;
}

.note-arrow{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.82rem;
  line-height:1;
  color:var(--gold);
  transform:translateY(-.04rem) rotate(-9deg);
}

.note{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1rem;
  line-height:1.12;
  font-style:italic;
  color:var(--ink);
  position:relative;
}

.note span{color:var(--ink-soft)}

.note-squiggle{
  position:absolute;
  left:6.4rem;
  bottom:-.88rem;
  width:6.2rem;
  color:var(--gold);
  opacity:.92;
}

.hero-visual{
  position:relative;
  min-height:clamp(25rem,52vh,38rem);
  overflow:visible;
  background:none;
  border-radius:0;
  pointer-events:none;
}

.hero-atmosphere{display:none}

.hero-mark{
  position:absolute;
  top:50%;
  left:40%;
  width:clamp(22rem,31vw,36rem);
  height:auto;
  max-height:86%;
  object-fit:contain;
  opacity:.39;
  transform:translate(-50%,-50%);
  filter:saturate(.90) contrast(.94);
}

.mobile-deer{display:none}

.services{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-strong);
  border-left:1px solid var(--line-strong);
  background:rgba(255,255,255,.24);
  backdrop-filter:blur(8px);
  box-shadow:0 -2px 0 rgba(255,255,255,.18) inset;
}

.service-card{
  min-width:0;
  padding:1rem 1.05rem 1.08rem;
  border-right:1px solid var(--line-strong);
  display:flex;
  flex-direction:column;
  gap:.62rem;
}

.service-icon{
  width:2.15rem;
  height:2.15rem;
  object-fit:contain;
  margin-bottom:.22rem;
}

.service-card h2{
  font-family:Cinzel,Georgia,serif;
  font-size:.92rem;
  line-height:1.28;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--ink);
}

.service-card p{
  font-size:.92rem;
  line-height:1.42;
  color:var(--ink-faint);
  max-width:16.8rem;
}

.footer{
  background:#1b1f22;
  color:#e8dfcf;
  border-top:1px solid rgba(180,143,70,.22);
}

.footer p{
  text-align:center;
  padding:.62rem .9rem;
  font-family:Cinzel,Georgia,serif;
  font-size:.62rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  opacity:.92;
}

/* Narrow desktop / tablet. Keep desktop composition; only the deer and its column adapt. */
@media(max-width:1180px) and (min-width:701px){
  .hero{
    grid-template-columns:minmax(0,1fr) clamp(10rem,22vw,16rem);
    gap:clamp(1rem,2.1vw,2.2rem);
  }

  .hero-copy{
    padding-top:clamp(.85rem,1.75vh,1.25rem);
    padding-bottom:clamp(.9rem,1.9vh,1.3rem);
  }

  .kicker{
    font-size:.64rem;
    letter-spacing:.16em;
  }

  h1{
    font-size:clamp(5rem,7.1vw,6.45rem);
  }

  .lead{font-size:1.16rem}
  .supporting{font-size:1.02rem}

  .hero-visual{
    min-height:clamp(19rem,44vh,28rem);
  }

  .hero-mark{
    left:37%;
    width:clamp(12.5rem,22vw,18rem);
    max-height:82%;
    opacity:.25;
  }

  .credibility{
    font-size:.63rem;
    letter-spacing:.095em;
    gap:.48rem .68rem;
  }

  .cred-item{
    padding-right:.68rem;
  }
}

/* Tight tablet, not mobile. */
@media(max-width:900px) and (min-width:701px){
  .hero{
    grid-template-columns:minmax(0,1fr) clamp(8rem,18vw,10.75rem);
    gap:clamp(.75rem,1.6vw,1.2rem);
  }

  .hero-copy{
    padding-top:.75rem;
    padding-bottom:1rem;
  }

  .kicker{
    font-size:.60rem;
    letter-spacing:.13em;
  }

  h1{
    font-size:clamp(4.75rem,8vw,5.55rem);
  }

  .lead{font-size:1.12rem}
  .supporting{font-size:1rem}

  .hero-visual{
    min-height:17rem;
  }

  .hero-mark{
    left:35%;
    width:clamp(8.8rem,16.5vw,11.5rem);
    max-height:78%;
    opacity:.22;
  }

  .credibility{
    font-size:.60rem;
    letter-spacing:.075em;
    gap:.38rem .50rem;
  }

  .cred-item{
    padding-right:.50rem;
  }

  .cred-item img{
    width:.84rem;
    height:.84rem;
  }

  .services{
    grid-template-columns:1fr 1fr;
    border:1px solid var(--line-strong);
    border-radius:1rem;
    overflow:hidden;
    margin-top:0;
  }

  .service-card{
    border:0;
  }

  .service-card:nth-child(2),
  .service-card:nth-child(4){
    border-left:1px solid var(--line-strong);
  }

  .service-card:nth-child(3),
  .service-card:nth-child(4){
    border-top:1px solid var(--line-strong);
  }
}

/* Short desktop/tablet windows. Normal document flow handles it. Keep spacing, allow scroll. */
@media(min-width:701px) and (max-height:760px){
  .header{
    padding-top:.7rem;
  }

  .hero{
    margin-bottom:.72rem;
  }

  .hero-copy{
    padding-top:.8rem;
    padding-bottom:.95rem;
  }

  .hero-visual{
    min-height:clamp(16rem,40vh,24rem);
  }

  .hero-mark{
    width:clamp(12rem,24vw,28rem);
    max-height:80%;
  }

  .actions{
    margin-top:.78rem;
  }

  .service-card{
    padding:.9rem 1rem;
  }
}

/* True mobile */
@media(max-width:700px){
  .header{
    position:sticky;
    top:0;
    z-index:50;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.72rem .9rem .68rem;
    background:rgba(244,239,231,.86);
    border-bottom:1px solid rgba(31,35,38,.10);
    backdrop-filter:blur(14px) saturate(1.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
  }

  .brand{
    gap:.48rem;
  }

  .brand-mark{
    width:1.55rem;
    height:1.55rem;
  }

  .brand-type{
    gap:.13rem;
  }

  .brand-type>span{
    font-size:.78rem;
    letter-spacing:.22em;
    text-indent:.22em;
  }

  .brand-type small{
    font-size:.34rem;
    letter-spacing:.50em;
    text-indent:.50em;
    padding-inline:.82rem;
  }

  .brand-type small::before,
  .brand-type small::after{
    width:.52rem;
  }

  .top-links{
    gap:.58rem;
    padding-top:0;
    font-size:.57rem;
    letter-spacing:.17em;
    flex:0 0 auto;
  }

  .top-links span{
    height:.78rem;
  }

  .main{
    padding:0 .75rem .75rem;
  }

  .hero{
    display:block;
    margin-bottom:0;
  }

  .hero-copy{
    padding:1.25rem 0 0;
    text-align:left;
  }

  .kicker{
    text-align:center;
    white-space:normal;
    font-size:.60rem;
    letter-spacing:.18em;
    line-height:1.7;
    margin:0 auto .75rem;
  }

  .kicker-name,
  .kicker-title{
    display:block;
  }

  .kicker-title::before{
    content:"";
  }

  h1{
    font-size:clamp(3.2rem,15vw,4.6rem);
    margin-bottom:1.2rem;
  }

  .lead{
    margin-top:0;
    font-size:1rem;
    line-height:1.5;
  }

  .supporting{
    font-size:.95rem;
    line-height:1.55;
  }

  .hero-visual{
    display:none;
  }

  .credibility{
    justify-content:center;
    text-align:center;
    width:auto;
    border-top:1px solid rgba(31,35,38,.12);
    border-bottom:1px solid rgba(31,35,38,.10);
    padding:.95rem 0;
    margin-top:1.2rem;
    flex-wrap:wrap;
    gap:.7rem 1.05rem;
    font-size:.64rem;
    letter-spacing:.14em;
  }

  .cred-item{
    justify-content:center;
    padding-right:0;
  }

  .cred-item::after{
    display:none;
  }

  .cred-item:first-child{
    padding-right:1.05rem;
  }

  .cred-item:first-child::after{
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:50%;
    width:1px;
    height:.9rem;
    background:var(--gold-soft);
    transform:translateY(-50%);
  }

  .cred-item:nth-child(3){
    flex-basis:100%;
  }

  .actions{
    justify-content:center;
    align-items:center;
    text-align:center;
    margin-top:1.15rem;
    gap:.7rem;
  }

  .cta{
    width:100%;
    justify-content:space-between;
    font-size:.78rem;
  }

  .note-arrow{
    display:none;
  }

  .note-wrap{
    display:block;
    width:100%;
    margin-top:.7rem;
    padding-bottom:1.15rem;
    text-align:center;
  }

  .note{
    display:block;
    width:max-content;
    max-width:100%;
    margin-inline:auto;
    text-align:center;
    font-size:.98rem;
  }

  .note-squiggle{
    left:50%;
    transform:translateX(-50%);
    bottom:.05rem;
    width:6.75rem;
  }

  .mobile-deer{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:.95rem 0 1.05rem;
  }

  .mobile-deer img{
    width:4.45rem;
    height:auto;
    opacity:.17;
    filter:saturate(.94) contrast(.98);
  }

  .services{
    grid-template-columns:1fr;
    border:1px solid var(--line-strong);
    border-radius:1rem;
    overflow:hidden;
    background:rgba(255,255,255,.40);
    box-shadow:none;
    margin-top:0;
  }

  .service-card{
    border:0;
    border-top:1px solid var(--line-strong);
    padding:1.25rem 1.15rem;
  }

  .service-card:first-child{
    border-top:0;
  }

  .service-card p{
    max-width:25rem;
  }

  .footer p{
    font-size:.58rem;
    letter-spacing:.16em;
    line-height:1.5;
  }
}

@media(max-width:430px){
  .header{
    padding:.65rem .78rem .62rem;
    gap:.55rem;
  }

  .brand{
    gap:.42rem;
  }

  .brand-mark{
    width:1.38rem;
    height:1.38rem;
  }

  .brand-type>span{
    font-size:.70rem;
    letter-spacing:.20em;
    text-indent:.20em;
  }

  .brand-type small{
    font-size:.30rem;
    letter-spacing:.44em;
    text-indent:.44em;
    padding-inline:.70rem;
  }

  .brand-type small::before,
  .brand-type small::after{
    width:.44rem;
  }

  .top-links{
    gap:.45rem;
    font-size:.53rem;
    letter-spacing:.145em;
  }

  .credibility{
    gap:.55rem .7rem;
    font-size:.58rem;
  }

  .cred-item:first-child{
    padding-right:.75rem;
  }

  .mobile-deer img{
    width:4rem;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    transition:none!important;
  }
}


/* v50: stable deer breakpoints
   Base is the v49 version you preferred.
   This only fixes the deer clipping / odd intermediate breakpoints without redesigning the page again.
*/

/* Full desktop: keep the preferred v49 composition. */
@media(min-width:1181px){
  .hero{
    grid-template-columns:minmax(0,55rem) minmax(20rem,1fr) !important;
  }

  .hero-visual{
    overflow:visible !important;
  }

  .hero-mark{
    left:40% !important;
    width:clamp(22rem,31vw,36rem) !important;
    max-height:86% !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* The problem zone: narrower desktop / tablet.
   Keep the same desktop logic, but make the deer fit inside its column instead of being sliced. */
@media(min-width:901px) and (max-width:1180px){
  .hero{
    grid-template-columns:minmax(0,1fr) clamp(13rem,24vw,17.5rem) !important;
    gap:clamp(1rem,2vw,2.25rem) !important;
  }

  .hero-visual{
    overflow:visible !important;
    min-height:clamp(20rem,44vh,28rem) !important;
  }

  .hero-mark{
    left:50% !important;
    width:min(100%,16.75rem) !important;
    max-height:82% !important;
    transform:translate(-50%,-50%) !important;
    opacity:.25 !important;
  }
}

/* Tight tablet, still not mobile.
   Same desktop composition, but the deer is now fully contained, not a cropped ghost. */
@media(min-width:701px) and (max-width:900px){
  .hero{
    grid-template-columns:minmax(0,1fr) clamp(9rem,22vw,12rem) !important;
    gap:clamp(.75rem,1.6vw,1.25rem) !important;
  }

  .hero-visual{
    overflow:visible !important;
    min-height:clamp(17rem,38vh,22rem) !important;
  }

  .hero-mark{
    left:50% !important;
    width:min(100%,11.5rem) !important;
    max-height:78% !important;
    transform:translate(-50%,-50%) !important;
    opacity:.22 !important;
  }
}

/* Height changes should not make the services climb or the deer become microscopic. */
@media(min-width:701px) and (max-height:760px){
  .hero{
    margin-bottom:.72rem !important;
  }

  .hero-copy{
    padding-top:.8rem !important;
    padding-bottom:.95rem !important;
  }

  .hero-visual{
    min-height:clamp(16.5rem,40vh,24rem) !important;
  }

  .hero-mark{
    max-height:78% !important;
  }

  .services{
    position:relative !important;
    z-index:4 !important;
  }
}

/* True mobile stays exactly as the deliberate mobile layout. */
@media(max-width:700px){
  .hero-visual{
    display:none !important;
  }

  .mobile-deer{
    display:flex !important;
  }
}


/* v51: luxury layout polish
   Base: v50, the strongest responsive version.
   Aim: keep the stability, but improve the large desktop composition, copy breathing room,
   services/footer finish, and name/title hierarchy. */

/* Global polish */
@media(min-width:701px){
  .main{
    padding-left:clamp(1.15rem, 2vw, 2.25rem) !important;
    padding-right:clamp(1.15rem, 2vw, 2.25rem) !important;
  }

  .header{
    padding-top:clamp(.82rem, 1.35vh, 1.1rem) !important;
    padding-bottom:.12rem !important;
  }

  .hero{
    margin-bottom:clamp(.62rem, 1.2vh, .95rem) !important;
  }

  /* Name/title: slightly more intentional and premium, still secondary to the logo and headline. */
  .kicker{
    font-size:.70rem !important;
    letter-spacing:.205em !important;
    line-height:1.35 !important;
    margin-bottom:.56rem !important;
    color:rgba(180,143,70,.92) !important;
  }

  .kicker-name{
    font-size:1.06em !important;
  }

  .kicker-title{
    opacity:.96 !important;
  }

  /* Hero copy: less cramped, more luxury editorial spacing. */
  h1{
    margin-bottom:1.05rem !important;
    letter-spacing:-.078em !important;
  }

  .lead{
    line-height:1.55 !important;
    margin-bottom:1.05rem !important;
    max-width:52rem !important;
  }

  .supporting{
    line-height:1.62 !important;
    max-width:50.5rem !important;
  }

  .credibility{
    margin-top:1.08rem !important;
    padding-top:.82rem !important;
  }

  .actions{
    margin-top:1.02rem !important;
  }

  /* Services: slightly more compact and cleaner so they do not feel broken at the bottom,
     while still reading as premium panels. */
  .services{
    border-top:1px solid rgba(31,35,38,.13) !important;
    border-left:1px solid rgba(31,35,38,.13) !important;
    background:rgba(255,255,255,.26) !important;
  }

  .service-card{
    padding:.92rem 1.04rem .96rem !important;
    gap:.52rem !important;
    border-right:1px solid rgba(31,35,38,.13) !important;
  }

  .service-icon{
    width:1.95rem !important;
    height:1.95rem !important;
    margin-bottom:.14rem !important;
  }

  .service-card h2{
    font-size:.86rem !important;
    letter-spacing:.185em !important;
    line-height:1.26 !important;
  }

  .service-card p{
    font-size:.86rem !important;
    line-height:1.38 !important;
    max-width:16.25rem !important;
  }

  /* Footer/banner: slimmer, more refined, less heavy. */
  .footer{
    background:#1b1f22 !important;
    border-top:1px solid rgba(180,143,70,.20) !important;
  }

  .footer p{
    padding:.38rem .9rem .42rem !important;
    font-size:.50rem !important;
    letter-spacing:.18em !important;
    line-height:1.35 !important;
    opacity:.84 !important;
  }
}

/* Large desktop refinement: make the hero feel less compressed without increasing total height too much. */
@media(min-width:1181px){
  .hero{
    grid-template-columns:minmax(0,56rem) minmax(20rem,1fr) !important;
    gap:clamp(1.8rem, 4.2vw, 5rem) !important;
  }

  .hero-copy{
    max-width:56rem !important;
    padding-top:clamp(1.15rem, 2.3vh, 1.85rem) !important;
    padding-bottom:clamp(1rem, 1.9vh, 1.45rem) !important;
  }

  .hero-mark{
    left:39% !important;
    width:clamp(22.5rem, 31.5vw, 36.5rem) !important;
    opacity:.385 !important;
  }
}

/* Narrow desktop/tablet: keep v50's stability, but avoid the copy looking starved. */
@media(min-width:901px) and (max-width:1180px){
  .hero-copy{
    padding-top:clamp(.95rem, 1.8vh, 1.25rem) !important;
    padding-bottom:clamp(.9rem, 1.7vh, 1.25rem) !important;
  }

  .kicker{
    font-size:.64rem !important;
    letter-spacing:.16em !important;
    margin-bottom:.48rem !important;
  }

  h1{
    margin-bottom:.95rem !important;
  }

  .lead{
    line-height:1.52 !important;
    margin-bottom:.95rem !important;
  }

  .supporting{
    line-height:1.58 !important;
  }

  .hero-mark{
    left:48% !important;
    width:min(100%,17rem) !important;
  }

  .service-card{
    padding:.94rem 1rem .98rem !important;
  }
}

/* Tight tablet: keep the clean 2x2 card layout and readable copy. */
@media(min-width:701px) and (max-width:900px){
  .kicker{
    font-size:.60rem !important;
    letter-spacing:.13em !important;
    margin-bottom:.42rem !important;
  }

  h1{
    margin-bottom:.88rem !important;
  }

  .lead{
    line-height:1.5 !important;
    margin-bottom:.88rem !important;
  }

  .supporting{
    line-height:1.55 !important;
  }

  .credibility{
    margin-top:.85rem !important;
    padding-top:.68rem !important;
  }

  .actions{
    margin-top:.82rem !important;
  }

  .service-card{
    padding:1rem 1.05rem 1.05rem !important;
  }

  .service-card p{
    max-width:22rem !important;
  }
}

/* Short browser windows: prevent the service row/footer feeling chopped.
   Let normal scroll handle height rather than squashing the luxury spacing to death. */
@media(min-width:701px) and (max-height:760px){
  .hero{
    margin-bottom:.78rem !important;
  }

  .hero-copy{
    padding-top:.86rem !important;
    padding-bottom:.95rem !important;
  }

  h1{
    margin-bottom:.8rem !important;
  }

  .lead{
    margin-bottom:.8rem !important;
    line-height:1.5 !important;
  }

  .supporting{
    line-height:1.54 !important;
  }

  .credibility{
    margin-top:.78rem !important;
    padding-top:.62rem !important;
  }

  .actions{
    margin-top:.72rem !important;
  }

  .footer p{
    padding:.32rem .9rem .36rem !important;
  }
}

/* True mobile: keep v50 treatment, only refine the footer slightly. */
@media(max-width:700px){
  .footer p{
    padding:.48rem .9rem !important;
    font-size:.54rem !important;
    letter-spacing:.15em !important;
  }
}


/* v53: v51 notes pass
   Built from v51, using the annotated notes:
   - name/job title higher
   - slightly larger gap after headline
   - slimmer footer banner but footer text more legible
   - remove the awkward gap under services
   - keep v51's stable luxury layout rather than veering off into CSS swamp folklore
*/

@media(min-width:701px){
  /* Pull the name/title up by reducing the hero-copy top padding.
     This keeps the logo area calm but makes the identity line feel less dropped. */
  .hero-copy{
    padding-top:clamp(.28rem, .9vh, .82rem) !important;
  }

  .kicker{
    margin-bottom:.62rem !important;
    top:-.10rem !important;
    position:relative !important;
  }

  /* Slightly more editorial breathing room below the headline. */
  h1{
    margin-bottom:1.22rem !important;
  }

  .lead{
    margin-bottom:1.02rem !important;
  }

  /* Keep the service panels tight and stop the bottom looking like accidental beige storage. */
  .services{
    margin-top:.22rem !important;
    margin-bottom:0 !important;
    border-bottom:1px solid rgba(31,35,38,.13) !important;
  }

  .service-card{
    padding-top:.90rem !important;
    padding-bottom:.78rem !important;
  }

  .service-card p{
    margin-bottom:0 !important;
  }

  /* Slimmer footer bar, but with text that doesn't look like it was designed for ants. */
  .footer{
    margin-top:0 !important;
  }

  .footer p{
    padding:.22rem .9rem .24rem !important;
    font-size:.57rem !important;
    letter-spacing:.15em !important;
    line-height:1.18 !important;
    opacity:.88 !important;
  }
}

/* Large desktop specific: keep the luxury spacing, just raise identity line and refine footer/services. */
@media(min-width:1181px){
  .hero-copy{
    padding-top:clamp(.18rem, .55vh, .55rem) !important;
  }

  .kicker{
    margin-bottom:.66rem !important;
  }

  h1{
    margin-bottom:1.26rem !important;
  }

  .services{
    margin-top:.20rem !important;
  }
}

/* Short-height desktop/laptop: preserve the same intent without letting panels feel chopped. */
@media(min-width:701px) and (max-height:760px){
  .hero-copy{
    padding-top:.22rem !important;
    padding-bottom:.72rem !important;
  }

  .kicker{
    margin-bottom:.52rem !important;
  }

  h1{
    margin-bottom:1.08rem !important;
  }

  .lead{
    margin-bottom:.86rem !important;
  }

  .credibility{
    margin-top:.70rem !important;
    padding-top:.58rem !important;
  }

  .actions{
    margin-top:.68rem !important;
  }

  .services{
    margin-top:.12rem !important;
  }

  .service-card{
    padding-top:.82rem !important;
    padding-bottom:.72rem !important;
  }

  .footer p{
    padding:.18rem .9rem .20rem !important;
    font-size:.56rem !important;
  }
}

/* True mobile: preserve the mobile design, just keep the footer refined. */
@media(max-width:700px){
  .footer p{
    padding:.42rem .9rem !important;
    font-size:.56rem !important;
    letter-spacing:.14em !important;
  }
}

/* v55: targeted fixes from latest review */
@media (min-width: 701px){
  .hero{ margin-top: -0.18rem !important; }
  .hero-copy{ padding-top: 0 !important; }
  .kicker{ position: relative !important; top: -0.38rem !important; margin-bottom: .82rem !important; }
  h1{ line-height: .845 !important; letter-spacing: -.058em !important; margin-bottom: 1.34rem !important; }
  h1 em{ letter-spacing: -.072em !important; }
  .lead{ margin-bottom: 1.02rem !important; }
  .footer p{ padding: .16rem .9rem .18rem !important; font-size: .60rem !important; line-height: 1.08 !important; letter-spacing: .16em !important; }
}

@media (min-width: 1181px){
  .hero{ margin-top: -0.22rem !important; }
  .kicker{ top: -0.46rem !important; margin-bottom: .88rem !important; }
  h1{ margin-bottom: 1.42rem !important; }
}

@media (min-width: 701px) and (max-width: 1180px){
  .hero{ margin-top: -0.12rem !important; }
  .kicker{ top: -0.26rem !important; margin-bottom: .74rem !important; }
  h1{ margin-bottom: 1.24rem !important; }
}

@media (min-width: 701px) and (max-height: 760px){
  .hero{ margin-top: -0.08rem !important; }
  .hero-copy{ padding-bottom: .76rem !important; }
  .kicker{ top: -0.20rem !important; margin-bottom: .64rem !important; }
  h1{ margin-bottom: 1.12rem !important; }
  .footer p{ padding: .14rem .9rem .16rem !important; font-size: .59rem !important; }
}

@media (max-width: 700px){
  .header{ position: sticky !important; top: 0 !important; z-index: 50 !important; }
  .footer p{ font-size: .58rem !important; padding: .34rem .9rem !important; line-height: 1.24 !important; }
}


/* v56: footer height, headline spacing, mobile fixed header
   Fixes:
   - footer bar height is actually reduced, not just the text
   - HubSpot / clarified spacing loosened further to stop letter collisions
   - mobile header is fixed in place again
   - name/title no longer gets jammed into the logo when viewport height is short
*/

/* Desktop/tablet headline spacing and footer */
@media (min-width: 701px){
  /* Looser wordmark spacing: less negative tracking + more line-height. */
  h1{
    line-height: .885 !important;
    letter-spacing: -.038em !important;
    margin-bottom: 1.36rem !important;
  }

  h1 em{
    letter-spacing: -.052em !important;
  }

  /* Actually reduce the footer BAR height, while keeping readable text. */
  .footer{
    height: 1.12rem !important;
    min-height: 1.12rem !important;
    max-height: 1.12rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-top: 0 !important;
  }

  .footer p{
    padding: 0 !important;
    margin: 0 !important;
    font-size: .60rem !important;
    line-height: 1 !important;
    letter-spacing: .155em !important;
  }
}

@media (min-width: 1181px){
  h1{
    line-height: .89 !important;
    letter-spacing: -.036em !important;
    margin-bottom: 1.44rem !important;
  }

  h1 em{
    letter-spacing: -.050em !important;
  }
}

/* Shorter height: do NOT pull name/title too close to the logo. */
@media (min-width: 701px) and (max-height: 760px){
  .hero{
    margin-top: 0 !important;
  }

  .hero-copy{
    padding-top: .44rem !important;
  }

  .kicker{
    top: 0 !important;
    margin-bottom: .72rem !important;
  }

  h1{
    line-height: .88 !important;
    letter-spacing: -.038em !important;
    margin-bottom: 1.16rem !important;
  }

  h1 em{
    letter-spacing: -.052em !important;
  }

  .footer{
    height: 1.06rem !important;
    min-height: 1.06rem !important;
    max-height: 1.06rem !important;
  }

  .footer p{
    font-size: .59rem !important;
    line-height: 1 !important;
  }
}

/* Mobile: fixed header, not sticky. Sticky can fail depending on ancestor overflow and Safari being Safari. */
@media (max-width: 700px){
  .header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
    background: rgba(244,239,231,.94) !important;
    border-bottom: 1px solid rgba(31,35,38,.10) !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  }

  .main{
    padding-top: 3.45rem !important;
  }

  h1{
    line-height: .91 !important;
    letter-spacing: -.040em !important;
  }

  h1 em{
    letter-spacing: -.052em !important;
  }

  .footer{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .footer p{
    padding: .34rem .9rem !important;
    font-size: .58rem !important;
    line-height: 1.24 !important;
    letter-spacing: .14em !important;
  }
}

@media (max-width: 430px){
  .main{
    padding-top: 3.18rem !important;
  }
}


/* v57: slightly looser headline tracking + fuller footer */
@media (min-width: 701px){
  /* Loosen headline tracking a touch more to avoid letter collisions. */
  h1{
    letter-spacing: -0.030em !important;
    line-height: 0.895 !important;
    margin-bottom: 1.48rem !important;
  }

  h1 em{
    letter-spacing: -0.044em !important;
  }

  /* Bring the footer back from too-thin, while keeping it elegant. */
  .footer{
    height: 1.42rem !important;
    min-height: 1.42rem !important;
    max-height: 1.42rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .footer p{
    font-size: 0.68rem !important;
    line-height: 1 !important;
    letter-spacing: 0.15em !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1181px){
  h1{
    letter-spacing: -0.028em !important;
    line-height: 0.90 !important;
    margin-bottom: 1.54rem !important;
  }

  h1 em{
    letter-spacing: -0.042em !important;
  }

  .footer{
    height: 1.46rem !important;
    min-height: 1.46rem !important;
    max-height: 1.46rem !important;
  }

  .footer p{
    font-size: 0.69rem !important;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  h1{
    letter-spacing: -0.030em !important;
    line-height: 0.89 !important;
    margin-bottom: 1.22rem !important;
  }

  h1 em{
    letter-spacing: -0.044em !important;
  }

  .footer{
    height: 1.30rem !important;
    min-height: 1.30rem !important;
    max-height: 1.30rem !important;
  }

  .footer p{
    font-size: 0.65rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 700px){
  h1{
    letter-spacing: -0.032em !important;
    line-height: 0.915 !important;
  }

  h1 em{
    letter-spacing: -0.045em !important;
  }

  .footer p{
    font-size: 0.61rem !important;
  }
}


/* v58: footer bar slightly larger */
@media (min-width: 701px){
  .footer{
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    max-height: 1.62rem !important;
  }

  .footer p{
    font-size: 0.69rem !important;
    line-height: 1 !important;
  }
}

@media (min-width: 1181px){
  .footer{
    height: 1.68rem !important;
    min-height: 1.68rem !important;
    max-height: 1.68rem !important;
  }

  .footer p{
    font-size: 0.70rem !important;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  .footer{
    height: 1.48rem !important;
    min-height: 1.48rem !important;
    max-height: 1.48rem !important;
  }

  .footer p{
    font-size: 0.66rem !important;
  }
}

@media (max-width: 700px){
  .footer{
    min-height: 2.06rem !important;
    height: 2.06rem !important;
  }

  .footer p{
    font-size: 0.62rem !important;
  }
}


/* v60: mobile scroll + footer gap fix
   v59 only added margin between services and footer. That can behave awkwardly in the preview/mobile viewport.
   This restores v58 as the base and adds the gap through main padding instead, so normal scrolling remains stable.
*/

/* Keep document scrolling normal on mobile/tablet preview contexts */
@media (max-width: 900px){
  html,
  body{
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .site-frame{
    height: auto !important;
    min-height: 100dvh !important;
  }
}

/* True mobile: fixed header remains, and the services/footer gap comes from main padding, not footer margins */
@media (max-width: 700px){
  .header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
  }

  .main{
    padding-top: 3.45rem !important;
    padding-bottom: .42rem !important;
  }

  .services{
    margin-bottom: 0 !important;
  }

  .footer{
    margin-top: 0 !important;
  }
}

/* Mobile landscape / narrow tablet: add the same visual breathing room without changing footer flow */
@media (max-width: 900px) and (orientation: landscape){
  .main{
    padding-bottom: .52rem !important;
  }

  .services{
    margin-bottom: 0 !important;
  }

  .footer{
    margin-top: 0 !important;
  }
}

@media (max-width: 430px){
  .main{
    padding-top: 3.18rem !important;
  }
}


/* v61: mobile scroll stability + larger footer gap
   Fixed mobile headers can cause intermittent scroll weirdness on mobile/Safari-style viewports.
   Use sticky again, but make the scroll container safe so it actually sticks.
*/

@media (max-width: 900px){
  html,
  body{
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
    overflow-x: clip !important;
  }

  .site-frame{
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
}

@media (max-width: 700px){
  .header{
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    z-index: 999 !important;
    background: rgba(244,239,231,.94) !important;
    border-bottom: 1px solid rgba(31,35,38,.10) !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  }

  /* Sticky header stays in normal flow, so no big artificial top padding needed. */
  .main{
    padding-top: 0 !important;
    padding-bottom: .72rem !important;
  }

  .services{
    margin-bottom: 0 !important;
  }

  .footer{
    margin-top: 0 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape){
  .main{
    padding-bottom: .82rem !important;
  }
}

@media (max-width: 430px){
  .main{
    padding-top: 0 !important;
    padding-bottom: .70rem !important;
  }
}


/* v62: minimum desktop vertical gaps
   Keeps a cleaner minimum gap between:
   1) the header/brand block and the kicker
   2) the services panel and the footer
   without disturbing the mobile behaviour from v61.
*/

@media (min-width: 701px){
  .main{
    padding-top: clamp(0.85rem, 0.45rem + 0.7vh, 1.15rem) !important;
    padding-bottom: clamp(1rem, 0.55rem + 0.75vh, 1.45rem) !important;
  }

  .services{
    margin-bottom: clamp(0.72rem, 0.42rem + 0.55vh, 1rem);
  }
}

/* Shorter desktop/laptop heights need the minimum spacing most */
@media (min-width: 701px) and (max-height: 820px){
  .main{
    padding-top: max(0.92rem, 1.8vh) !important;
    padding-bottom: max(1rem, 2vh) !important;
  }

  .services{
    margin-bottom: max(0.82rem, 1.55vh);
  }
}


/* v65: copy update + selected experience strip
   Keeps the v64 layout shape, but makes the longer positioning copy fit without turning the page into a content landfill. */
@media (min-width: 701px){
  h1{
    font-size: clamp(4.05rem, 5.22vw, 5.72rem) !important;
    line-height: .925 !important;
    letter-spacing: -0.024em !important;
    margin-bottom: 1.08rem !important;
  }

  h1 em{
    letter-spacing: -0.038em !important;
  }

  h1 .headline-line{
    display: inline-block !important;
    white-space: nowrap !important;
    color: var(--ink) !important;
  }

  h1 .headline-dot{
    color: var(--gold) !important;
  }

  .lead{
    max-width: 54rem !important;
    font-size: clamp(1rem, 1.08vw, 1.12rem) !important;
    line-height: 1.45 !important;
    margin-bottom: .72rem !important;
  }

  .supporting{
    max-width: 53.5rem !important;
    font-size: clamp(.88rem, .92vw, .96rem) !important;
    line-height: 1.44 !important;
  }

  .credibility{
    margin-top: .74rem !important;
    padding-top: .58rem !important;
  }

  .actions{
    margin-top: .72rem !important;
  }

  .cta{
    padding: .82rem 1.15rem !important;
    font-size: .76rem !important;
    letter-spacing: .16em !important;
  }

  .services{
    margin-top: .08rem !important;
    margin-bottom: 0 !important;
  }

  .service-card{
    padding: .62rem .86rem .64rem !important;
    gap: .32rem !important;
  }

  .service-icon{
    width: 1.32rem !important;
    height: 1.32rem !important;
    margin-bottom: .02rem !important;
  }

  .service-card h2{
    font-size: .70rem !important;
    line-height: 1.16 !important;
    letter-spacing: .17em !important;
  }

  .service-card p{
    font-size: .735rem !important;
    line-height: 1.27 !important;
    max-width: 17.2rem !important;
  }

  .selected-experience{
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(8.5rem, .62fr) minmax(0, 1.45fr) minmax(0, 1.35fr);
    gap: .72rem;
    align-items: start;
    padding: .50rem .86rem .52rem;
    border-left: 1px solid rgba(31,35,38,.13);
    border-right: 1px solid rgba(31,35,38,.13);
    border-bottom: 1px solid rgba(31,35,38,.13);
    background: rgba(255,255,255,.20);
    backdrop-filter: blur(8px);
    box-shadow: 0 -1px 0 rgba(255,255,255,.20) inset;
    margin-bottom: clamp(.72rem, .42rem + .55vh, 1rem);
  }

  .selected-experience h2{
    font-family: Cinzel, Georgia, serif;
    font-size: .66rem;
    line-height: 1.18;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--gold);
    padding-top: .02rem;
  }

  .selected-experience p{
    font-size: .715rem;
    line-height: 1.29;
    color: var(--ink-faint);
    max-width: none;
  }

  .footer{
    margin-top: 0 !important;
  }
}

@media (min-width: 1181px){
  .hero-copy{
    max-width: 58rem !important;
  }

  h1{
    font-size: clamp(4.55rem, 5.28vw, 5.95rem) !important;
    line-height: .92 !important;
    margin-bottom: 1.12rem !important;
  }

  .lead{
    font-size: clamp(1.02rem, 1.08vw, 1.15rem) !important;
    line-height: 1.46 !important;
  }

  .supporting{
    font-size: clamp(.90rem, .92vw, .98rem) !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  h1{
    font-size: clamp(3.92rem, 5.05vw, 4.72rem) !important;
    margin-bottom: .94rem !important;
  }

  .lead{
    font-size: .98rem !important;
    line-height: 1.42 !important;
    margin-bottom: .62rem !important;
  }

  .supporting{
    font-size: .86rem !important;
    line-height: 1.40 !important;
  }

  .credibility{
    margin-top: .62rem !important;
    padding-top: .48rem !important;
  }

  .actions{
    margin-top: .62rem !important;
  }

  .service-card{
    padding: .58rem .72rem .60rem !important;
  }

  .service-card p{
    font-size: .70rem !important;
    line-height: 1.25 !important;
  }

  .selected-experience{
    grid-template-columns: minmax(7.25rem, .62fr) minmax(0, 1.45fr) minmax(0, 1.35fr);
    gap: .58rem;
    padding: .44rem .72rem .46rem;
  }

  .selected-experience h2{
    font-size: .60rem;
    letter-spacing: .16em;
  }

  .selected-experience p{
    font-size: .675rem;
    line-height: 1.25;
  }
}

@media (min-width: 701px) and (max-width: 900px){
  h1{
    font-size: clamp(3.35rem, 5.9vw, 4.05rem) !important;
    line-height: .94 !important;
    margin-bottom: .82rem !important;
  }

  .lead{
    font-size: .96rem !important;
    line-height: 1.42 !important;
    margin-bottom: .58rem !important;
  }

  .supporting{
    font-size: .84rem !important;
    line-height: 1.40 !important;
  }

  .services{
    grid-template-columns: 1fr 1fr !important;
    margin-top: .06rem !important;
    border-bottom: 0 !important;
  }

  .service-card{
    padding: .70rem .82rem .72rem !important;
  }

  .service-icon{
    width: 1.24rem !important;
    height: 1.24rem !important;
  }

  .service-card h2{
    font-size: .66rem !important;
  }

  .service-card p{
    font-size: .71rem !important;
    line-height: 1.26 !important;
    max-width: 21rem !important;
  }

  .selected-experience{
    grid-template-columns: 1fr;
    gap: .34rem;
    padding: .62rem .82rem .66rem;
    border: 1px solid rgba(31,35,38,.13);
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    margin-bottom: max(.82rem, 1.55vh);
  }

  .selected-experience h2{
    font-size: .64rem;
    letter-spacing: .17em;
  }

  .selected-experience p{
    font-size: .74rem;
    line-height: 1.33;
  }
}

@media (min-width: 701px) and (max-height: 820px){
  h1{
    margin-bottom: .84rem !important;
  }

  .lead{
    margin-bottom: .58rem !important;
  }

  .supporting{
    line-height: 1.37 !important;
  }

  .credibility{
    margin-top: .56rem !important;
    padding-top: .44rem !important;
  }

  .actions{
    margin-top: .56rem !important;
  }

  .service-card{
    padding-top: .52rem !important;
    padding-bottom: .54rem !important;
  }

  .selected-experience{
    margin-bottom: max(.82rem, 1.55vh);
    padding-top: .40rem;
    padding-bottom: .42rem;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  h1{
    font-size: clamp(3.72rem, 4.88vw, 5.22rem) !important;
    margin-bottom: .72rem !important;
  }

  .lead{
    font-size: .94rem !important;
    line-height: 1.36 !important;
    margin-bottom: .48rem !important;
  }

  .supporting{
    font-size: .82rem !important;
    line-height: 1.33 !important;
  }

  .credibility{
    margin-top: .46rem !important;
    padding-top: .38rem !important;
  }

  .actions{
    margin-top: .46rem !important;
  }

  .cta{
    padding: .72rem 1.02rem !important;
    font-size: .70rem !important;
  }

  .service-icon{
    width: 1.12rem !important;
    height: 1.12rem !important;
  }

  .service-card{
    padding: .44rem .76rem .46rem !important;
    gap: .24rem !important;
  }

  .service-card h2{
    font-size: .64rem !important;
    line-height: 1.10 !important;
  }

  .service-card p{
    font-size: .665rem !important;
    line-height: 1.21 !important;
  }

  .selected-experience{
    padding: .34rem .76rem .36rem;
  }

  .selected-experience h2{
    font-size: .58rem;
    line-height: 1.1;
  }

  .selected-experience p{
    font-size: .64rem;
    line-height: 1.20;
  }
}

@media (max-width: 700px){
  h1{
    font-size: clamp(2.42rem, 10.2vw, 3.22rem) !important;
    line-height: .96 !important;
    letter-spacing: -0.020em !important;
    margin-bottom: 1rem !important;
  }

  h1 .headline-line{
    display: inline-block !important;
    white-space: nowrap !important;
    color: var(--ink) !important;
  }

  h1 .headline-dot{
    color: var(--gold) !important;
  }

  .lead{
    font-size: .96rem !important;
    line-height: 1.45 !important;
  }

  .supporting{
    font-size: .90rem !important;
    line-height: 1.48 !important;
  }

  .service-card{
    padding: .92rem 1rem !important;
    gap: .42rem !important;
  }

  .service-icon{
    width: 1.55rem !important;
    height: 1.55rem !important;
  }

  .service-card h2{
    font-size: .76rem !important;
    letter-spacing: .17em !important;
  }

  .service-card p{
    font-size: .84rem !important;
    line-height: 1.35 !important;
  }

  .selected-experience{
    display: grid;
    gap: .48rem;
    padding: .90rem 1rem .95rem;
    border: 1px solid var(--line-strong);
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    background: rgba(255,255,255,.34);
    margin-bottom: 0;
  }

  .selected-experience h2{
    font-family: Cinzel, Georgia, serif;
    font-size: .72rem;
    line-height: 1.22;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--gold);
  }

  .selected-experience p{
    font-size: .84rem;
    line-height: 1.38;
    color: var(--ink-faint);
  }
}


/* v65b: mobile headline and header containment */
@media (max-width: 700px){
  h1{
    font-size: clamp(2rem, 9.4vw, 2.95rem) !important;
    line-height: .98 !important;
  }

  .top-links{
    font-size: .49rem !important;
    letter-spacing: .12em !important;
    gap: .38rem !important;
  }

  .top-links span{
    height: .68rem !important;
  }
}

@media (max-width: 430px){
  .top-links{
    font-size: .46rem !important;
    letter-spacing: .105em !important;
    gap: .32rem !important;
  }
}

/* v66: restore a little scale and make the selected-experience strip feel intentional rather than bolted on by a caffeinated spreadsheet. */
@media (min-width: 701px){
  h1{
    font-size: clamp(4.35rem, 5.55vw, 6.18rem) !important;
    line-height: .92 !important;
    margin-bottom: 1rem !important;
  }

  .lead{
    margin-bottom: .68rem !important;
  }

  .supporting{
    line-height: 1.42 !important;
  }

  .service-card{
    padding: .70rem .90rem .72rem !important;
    gap: .34rem !important;
  }

  .service-icon{
    width: 1.42rem !important;
    height: 1.42rem !important;
  }

  .service-card h2{
    font-size: .75rem !important;
    line-height: 1.18 !important;
    letter-spacing: .17em !important;
  }

  .service-card p{
    font-size: .78rem !important;
    line-height: 1.29 !important;
    max-width: 17.4rem !important;
  }

  .selected-experience{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1.55fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
    border-left: 1px solid rgba(31,35,38,.13) !important;
    border-right: 1px solid rgba(31,35,38,.13) !important;
    border-bottom: 1px solid rgba(31,35,38,.13) !important;
    background: rgba(255,255,255,.24) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.20) inset !important;
    margin-bottom: clamp(.72rem, .42rem + .55vh, 1rem) !important;
    overflow: hidden !important;
  }

  .selected-experience h2,
  .selected-experience p{
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: .52rem .90rem .54rem !important;
  }

  .selected-experience h2{
    font-size: .67rem !important;
    line-height: 1.18 !important;
    letter-spacing: .18em !important;
  }

  .selected-experience p{
    border-left: 1px solid rgba(31,35,38,.105) !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
    color: var(--ink-faint) !important;
  }
}

@media (min-width: 1181px){
  h1{
    font-size: clamp(4.75rem, 5.62vw, 6.28rem) !important;
    margin-bottom: 1.04rem !important;
  }

  .service-card p{
    font-size: .79rem !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  h1{
    font-size: clamp(4.08rem, 5.25vw, 4.95rem) !important;
    margin-bottom: .88rem !important;
  }

  .service-card{
    padding: .66rem .78rem .68rem !important;
  }

  .service-card h2{
    font-size: .70rem !important;
  }

  .service-card p{
    font-size: .735rem !important;
    line-height: 1.27 !important;
  }

  .selected-experience h2,
  .selected-experience p{
    padding: .48rem .78rem .50rem !important;
  }

  .selected-experience h2{
    font-size: .62rem !important;
  }

  .selected-experience p{
    font-size: .69rem !important;
    line-height: 1.26 !important;
  }
}

@media (min-width: 701px) and (max-width: 900px){
  h1{
    font-size: clamp(3.48rem, 6.08vw, 4.24rem) !important;
    margin-bottom: .78rem !important;
  }

  .service-card{
    padding: .76rem .86rem .78rem !important;
  }

  .service-card h2{
    font-size: .69rem !important;
  }

  .service-card p{
    font-size: .75rem !important;
    line-height: 1.29 !important;
  }

  .selected-experience{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border: 1px solid rgba(31,35,38,.13) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
  }

  .selected-experience h2,
  .selected-experience p{
    display: block !important;
    padding: .58rem .86rem !important;
  }

  .selected-experience p{
    border-left: 0 !important;
    border-top: 1px solid rgba(31,35,38,.085) !important;
    font-size: .755rem !important;
    line-height: 1.34 !important;
  }
}

@media (min-width: 701px) and (max-height: 820px){
  h1{
    font-size: clamp(4.08rem, 5.58vw, 5.86rem) !important;
    margin-bottom: .76rem !important;
  }

  .lead{
    margin-bottom: .52rem !important;
  }

  .supporting{
    line-height: 1.34 !important;
  }

  .service-card{
    padding-top: .56rem !important;
    padding-bottom: .58rem !important;
  }

  .service-card p{
    font-size: .725rem !important;
    line-height: 1.235 !important;
  }

  .selected-experience h2,
  .selected-experience p{
    padding-top: .40rem !important;
    padding-bottom: .42rem !important;
  }

  .selected-experience p{
    font-size: .67rem !important;
    line-height: 1.22 !important;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  h1{
    font-size: clamp(3.92rem, 5.36vw, 5.58rem) !important;
    margin-bottom: .68rem !important;
  }

  .lead{
    font-size: .955rem !important;
    line-height: 1.35 !important;
    margin-bottom: .46rem !important;
  }

  .supporting{
    font-size: .835rem !important;
    line-height: 1.32 !important;
  }

  .service-icon{
    width: 1.20rem !important;
    height: 1.20rem !important;
  }

  .service-card{
    padding: .48rem .78rem .50rem !important;
    gap: .25rem !important;
  }

  .service-card h2{
    font-size: .67rem !important;
    line-height: 1.12 !important;
  }

  .service-card p{
    font-size: .70rem !important;
    line-height: 1.22 !important;
  }

  .selected-experience h2,
  .selected-experience p{
    padding: .36rem .78rem .38rem !important;
  }

  .selected-experience h2{
    font-size: .59rem !important;
  }

  .selected-experience p{
    font-size: .645rem !important;
    line-height: 1.20 !important;
  }
}

@media (max-width: 700px){
  h1{
    font-size: clamp(2.12rem, 9.9vw, 3.08rem) !important;
    line-height: .97 !important;
  }

  .service-card{
    padding: 1rem 1.04rem !important;
    gap: .46rem !important;
  }

  .service-icon{
    width: 1.62rem !important;
    height: 1.62rem !important;
  }

  .service-card h2{
    font-size: .79rem !important;
  }

  .service-card p{
    font-size: .875rem !important;
    line-height: 1.38 !important;
  }

  .selected-experience{
    display: block !important;
    margin-top: .78rem !important;
    margin-bottom: 0 !important;
    padding: .98rem 1.04rem 1.02rem !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 1rem !important;
    background: rgba(255,255,255,.40) !important;
    box-shadow: none !important;
  }

  .selected-experience h2{
    font-size: .74rem !important;
    line-height: 1.22 !important;
    letter-spacing: .18em !important;
    margin: 0 0 .66rem !important;
  }

  .selected-experience p{
    font-size: .865rem !important;
    line-height: 1.40 !important;
    color: var(--ink-faint) !important;
    margin: 0 !important;
  }

  .selected-experience p + p{
    margin-top: .70rem !important;
    padding-top: .70rem !important;
    border-top: 1px solid rgba(31,35,38,.10) !important;
  }
}

@media (max-width: 430px){
  h1{
    font-size: clamp(2.02rem, 9.55vw, 2.92rem) !important;
  }

  .selected-experience{
    margin-top: .70rem !important;
    padding: .92rem .96rem .96rem !important;
  }
}


/* v67: headline back to v64 scale with the broader, cleaner "HubSpot solutions" wording.
   Also fixes the tablet 2x2 service stack so selected experience continues the card neatly. */
@media (min-width: 701px){
  h1{
    font-size: clamp(5.25rem, 7vw, 7.15rem) !important;
    line-height: .895 !important;
    letter-spacing: -.030em !important;
    margin-bottom: 1.18rem !important;
  }

  h1 em{
    letter-spacing: -.044em !important;
  }
}

@media (min-width: 1181px){
  h1{
    font-size: clamp(5.25rem, 7vw, 7.15rem) !important;
    line-height: .90 !important;
    margin-bottom: 1.22rem !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  h1{
    font-size: clamp(5rem, 7.1vw, 6.45rem) !important;
    line-height: .895 !important;
    margin-bottom: .98rem !important;
  }
}

@media (min-width: 701px) and (max-width: 900px){
  h1{
    font-size: clamp(4.75rem, 8vw, 5.55rem) !important;
    line-height: .895 !important;
    margin-bottom: .86rem !important;
  }

  .services{
    border-bottom: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  .selected-experience{
    margin-top: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 0 0 1rem 1rem !important;
    background: rgba(255,255,255,.34) !important;
    overflow: hidden !important;
  }

  .selected-experience h2{
    border-bottom: 1px solid rgba(31,35,38,.085) !important;
  }

  .selected-experience p{
    border-top: 0 !important;
  }
}

@media (min-width: 701px) and (max-height: 820px){
  h1{
    font-size: clamp(5.05rem, 6.75vw, 6.85rem) !important;
    margin-bottom: .92rem !important;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  h1{
    font-size: clamp(4.75rem, 6.45vw, 6.35rem) !important;
    margin-bottom: .76rem !important;
  }
}

@media (max-width: 700px){
  h1{
    font-size: clamp(2.36rem, 10.8vw, 3.28rem) !important;
    line-height: .94 !important;
    letter-spacing: -.032em !important;
  }
}

@media (max-width: 430px){
  h1{
    font-size: clamp(2.24rem, 10.4vw, 3.08rem) !important;
  }
}


/* v68: lighter selected-experience copy + mobile landscape polish.
   Keeps the v67 headline scale. The experience area now reads like a premium credential strip,
   not a legal disclosure being punished by typography. */
@media (min-width: 701px){
  .selected-experience p{
    font-size: .70rem !important;
    line-height: 1.28 !important;
    letter-spacing: .01em !important;
  }
}

@media (min-width: 1181px){
  .selected-experience p{
    font-size: .715rem !important;
    line-height: 1.28 !important;
  }
}

@media (min-width: 701px) and (max-width: 900px){
  .selected-experience{
    margin-top: 0 !important;
  }

  .selected-experience h2{
    font-size: .64rem !important;
    line-height: 1.18 !important;
  }

  .selected-experience p{
    font-size: .71rem !important;
    line-height: 1.34 !important;
  }
}

/* The awkward zone: phone/tablet landscape where the services become 2x2.
   Keep Selected Experience as a slim strip instead of huge stacked paragraphs. */
@media (min-width: 701px) and (max-width: 900px) and (orientation: landscape){
  .selected-experience{
    display: grid !important;
    grid-template-columns: minmax(8.8rem, .72fr) minmax(0, 1.45fr) minmax(0, 1.45fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    background: rgba(255,255,255,.34) !important;
    overflow: hidden !important;
  }

  .selected-experience h2,
  .selected-experience p{
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: .48rem .72rem .50rem !important;
  }

  .selected-experience h2{
    border-bottom: 0 !important;
    font-size: .58rem !important;
    letter-spacing: .165em !important;
  }

  .selected-experience p{
    border-left: 1px solid rgba(31,35,38,.095) !important;
    border-top: 0 !important;
    font-size: .62rem !important;
    line-height: 1.24 !important;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  .selected-experience p{
    font-size: .62rem !important;
    line-height: 1.20 !important;
  }
}

@media (max-width: 700px){
  .selected-experience p{
    font-size: .82rem !important;
    line-height: 1.36 !important;
  }
}


/* v69: shorter hero copy + cleaner selected-experience behaviour at awkward stacked-service sizes.
   The copy is now closer to the original concise version while keeping HubSpot SEO terms visible. */
@media (min-width: 701px){
  .lead{
    max-width: 49rem !important;
  }

  .supporting{
    max-width: 49.5rem !important;
  }
}

/* When the service cards stack 2x2, keep Selected Experience as a controlled two-column credential strip.
   This avoids the odd three-column divider rhythm that looked broken in mobile landscape/tablet widths. */
@media (min-width: 701px) and (max-width: 980px){
  .selected-experience{
    display: grid !important;
    grid-template-columns: minmax(8.7rem, .36fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.34) !important;
  }

  .selected-experience h2{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    align-items: center !important;
    border-right: 1px solid rgba(31,35,38,.105) !important;
    border-bottom: 0 !important;
    padding: .55rem .74rem !important;
    font-size: .60rem !important;
    line-height: 1.2 !important;
    letter-spacing: .17em !important;
  }

  .selected-experience p{
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    padding: .43rem .80rem !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
  }

  .selected-experience p + p{
    border-top: 1px solid rgba(31,35,38,.085) !important;
  }
}

@media (min-width: 701px) and (max-width: 980px) and (max-height: 760px){
  .selected-experience h2{
    padding-top: .46rem !important;
    padding-bottom: .46rem !important;
    font-size: .56rem !important;
  }

  .selected-experience p{
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
    font-size: .62rem !important;
    line-height: 1.20 !important;
  }
}

@media (max-width: 700px){
  .lead{
    margin-bottom: .72rem !important;
  }

  .supporting{
    font-size: .90rem !important;
    line-height: 1.46 !important;
  }

  .selected-experience p{
    font-size: .80rem !important;
    line-height: 1.34 !important;
  }
}


/* v70: Selected Experience list-strip fix + concise SEO body copy
   Prevents awkward divider behaviour at landscape/tablet widths and returns the experience copy to sleek item lists. */
@media (min-width: 701px){
  .supporting{
    max-width: 49rem !important;
  }

  .selected-experience{
    display: grid !important;
    grid-template-columns: minmax(8.75rem, .62fr) minmax(0, 1.55fr) minmax(0, 1.55fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
    border-left: 1px solid rgba(31,35,38,.13) !important;
    border-right: 1px solid rgba(31,35,38,.13) !important;
    border-bottom: 1px solid rgba(31,35,38,.13) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.25) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset !important;
    margin-top: 0 !important;
    margin-bottom: clamp(.72rem, .42rem + .55vh, 1rem) !important;
  }

  .selected-experience h2,
  .selected-experience .experience-list{
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: .50rem .86rem .52rem !important;
  }

  .selected-experience h2{
    border-right: 1px solid rgba(31,35,38,.105) !important;
    border-bottom: 0 !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: .64rem !important;
    line-height: 1.18 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
  }

  .selected-experience .experience-list{
    flex-wrap: wrap !important;
    gap: .18rem .42rem !important;
    border-left: 0 !important;
    border-top: 0 !important;
    font-size: .69rem !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
    color: var(--ink-faint) !important;
  }

  .selected-experience .experience-list + .experience-list{
    border-left: 1px solid rgba(31,35,38,.085) !important;
  }

  .experience-list span{
    display: inline-flex !important;
    align-items: center !important;
    white-space: normal !important;
  }

  .experience-list span:not(:last-child)::after{
    content: "·";
    color: var(--gold-soft);
    margin-left: .42rem;
  }
}

@media (min-width: 1181px){
  .selected-experience .experience-list{
    font-size: .705rem !important;
    line-height: 1.25 !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px){
  .selected-experience{
    grid-template-columns: minmax(7.8rem, .58fr) minmax(0, 1.55fr) minmax(0, 1.55fr) !important;
  }

  .selected-experience h2,
  .selected-experience .experience-list{
    padding: .44rem .72rem .46rem !important;
  }

  .selected-experience h2{
    font-size: .58rem !important;
    letter-spacing: .165em !important;
  }

  .selected-experience .experience-list{
    font-size: .64rem !important;
    line-height: 1.21 !important;
    gap: .14rem .34rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .34rem;
  }
}

/* When the services stack 2x2, make the experience section a calm full-width strip rather than a divided block. */
@media (min-width: 701px) and (max-width: 980px){
  .selected-experience{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    background: rgba(255,255,255,.34) !important;
    overflow: hidden !important;
  }

  .selected-experience h2,
  .selected-experience .experience-list{
    display: flex !important;
    align-items: center !important;
    padding: .48rem .82rem !important;
  }

  .selected-experience h2{
    border-right: 0 !important;
    border-bottom: 1px solid rgba(31,35,38,.085) !important;
    font-size: .60rem !important;
    line-height: 1.18 !important;
    letter-spacing: .17em !important;
  }

  .selected-experience .experience-list{
    border-left: 0 !important;
    border-top: 0 !important;
    font-size: .67rem !important;
    line-height: 1.26 !important;
    gap: .16rem .38rem !important;
  }

  .selected-experience .experience-list + .experience-list{
    border-left: 0 !important;
    border-top: 1px solid rgba(31,35,38,.075) !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .38rem;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  .selected-experience h2,
  .selected-experience .experience-list{
    padding-top: .36rem !important;
    padding-bottom: .38rem !important;
  }

  .selected-experience h2{
    font-size: .56rem !important;
  }

  .selected-experience .experience-list{
    font-size: .61rem !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 700px){
  .supporting{
    font-size: .90rem !important;
    line-height: 1.46 !important;
  }

  .selected-experience{
    display: block !important;
    margin-top: .72rem !important;
    padding: .90rem 1rem .96rem !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 1rem !important;
    background: rgba(255,255,255,.40) !important;
    box-shadow: none !important;
  }

  .selected-experience h2{
    font-family: Cinzel, Georgia, serif !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
    margin: 0 0 .62rem !important;
    border: 0 !important;
  }

  .selected-experience .experience-list{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .18rem .42rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: .80rem !important;
    line-height: 1.34 !important;
    color: var(--ink-faint) !important;
  }

  .selected-experience .experience-list + .experience-list{
    margin-top: .64rem !important;
    padding-top: .64rem !important;
    border-top: 1px solid rgba(31,35,38,.10) !important;
  }

  .experience-list span{
    display: inline-flex !important;
    align-items: center !important;
  }

  .experience-list span:not(:last-child)::after{
    content: "·";
    color: var(--gold-soft);
    margin-left: .42rem;
  }
}

/* v71: reset Selected Experience into a stable list-strip and restore more elegant hero leading.
   This avoids the weird divider/stacking behaviour at mobile-landscape and awkward tablet widths. */
@media (min-width: 701px){
  .lead{
    line-height: 1.56 !important;
    margin-bottom: .96rem !important;
    max-width: 50rem !important;
  }

  .supporting{
    line-height: 1.58 !important;
    max-width: 50rem !important;
  }

  .selected-experience{
    display: block !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(31,35,38,.13) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.28) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset !important;
    margin-top: 0 !important;
    margin-bottom: clamp(.72rem, .42rem + .55vh, 1rem) !important;
  }

  .selected-experience h2{
    display: block !important;
    margin: 0 !important;
    padding: .42rem .86rem .40rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(31,35,38,.085) !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: .64rem !important;
    line-height: 1.18 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
  }

  .selected-experience .experience-list{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .18rem .42rem !important;
    margin: 0 !important;
    padding: .44rem .86rem .46rem !important;
    border: 0 !important;
    font-size: .70rem !important;
    line-height: 1.27 !important;
    letter-spacing: .005em !important;
    color: var(--ink-faint) !important;
  }

  .selected-experience .experience-list + .experience-list{
    border-top: 1px solid rgba(31,35,38,.075) !important;
  }

  .experience-list span{
    display: inline-flex !important;
    align-items: center !important;
    white-space: normal !important;
  }

  .experience-list span:not(:last-child)::after{
    content: "·" !important;
    color: var(--gold-soft) !important;
    margin-left: .42rem !important;
  }
}

@media (min-width: 1181px){
  .selected-experience .experience-list{
    font-size: .715rem !important;
    line-height: 1.28 !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px){
  .lead{
    line-height: 1.52 !important;
    margin-bottom: .84rem !important;
  }

  .supporting{
    line-height: 1.54 !important;
  }

  .selected-experience h2{
    padding: .38rem .74rem .36rem !important;
    font-size: .60rem !important;
    letter-spacing: .17em !important;
  }

  .selected-experience .experience-list{
    padding: .38rem .74rem .40rem !important;
    font-size: .64rem !important;
    line-height: 1.24 !important;
    gap: .14rem .34rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .34rem !important;
  }
}

@media (min-width: 701px) and (max-width: 980px){
  .lead{
    line-height: 1.50 !important;
    margin-bottom: .76rem !important;
  }

  .supporting{
    line-height: 1.52 !important;
  }

  .selected-experience{
    border: 1px solid var(--line-strong) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    background: rgba(255,255,255,.34) !important;
  }

  .selected-experience h2{
    padding: .40rem .82rem .38rem !important;
    font-size: .60rem !important;
    line-height: 1.18 !important;
    letter-spacing: .17em !important;
  }

  .selected-experience .experience-list{
    padding: .40rem .82rem .42rem !important;
    font-size: .66rem !important;
    line-height: 1.28 !important;
    gap: .15rem .36rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .36rem !important;
  }
}

@media (min-width: 701px) and (max-height: 760px){
  .lead{
    line-height: 1.47 !important;
    margin-bottom: .68rem !important;
  }

  .supporting{
    line-height: 1.49 !important;
  }

  .selected-experience h2{
    padding-top: .34rem !important;
    padding-bottom: .32rem !important;
    font-size: .56rem !important;
  }

  .selected-experience .experience-list{
    padding-top: .33rem !important;
    padding-bottom: .34rem !important;
    font-size: .61rem !important;
    line-height: 1.24 !important;
    gap: .11rem .30rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .30rem !important;
  }
}

@media (max-width: 700px){
  .lead{
    line-height: 1.54 !important;
    margin-bottom: .84rem !important;
  }

  .supporting{
    line-height: 1.54 !important;
  }

  .selected-experience{
    display: block !important;
    margin-top: .72rem !important;
    padding: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.40) !important;
    box-shadow: none !important;
  }

  .selected-experience h2{
    display: block !important;
    margin: 0 !important;
    padding: .76rem 1rem .68rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(31,35,38,.09) !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: .72rem !important;
    line-height: 1.22 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
  }

  .selected-experience .experience-list{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .18rem .42rem !important;
    margin: 0 !important;
    padding: .78rem 1rem !important;
    border: 0 !important;
    font-size: .80rem !important;
    line-height: 1.38 !important;
    color: var(--ink-faint) !important;
  }

  .selected-experience .experience-list + .experience-list{
    border-top: 1px solid rgba(31,35,38,.10) !important;
  }

  .experience-list span:not(:last-child)::after{
    content: "·" !important;
    color: var(--gold-soft) !important;
    margin-left: .42rem !important;
  }
}


/* v72: restore the sleeker earlier Selected Experience layout, but make it behave at the awkward tablet/mobile-landscape widths.
   Also keeps the more open v71 hero body leading. CSS, asked to act normal for once. */
@media (min-width: 701px){
  .lead{
    line-height: 1.56 !important;
    margin-bottom: .96rem !important;
    max-width: 50rem !important;
  }

  .supporting{
    line-height: 1.58 !important;
    max-width: 50rem !important;
  }

  .selected-experience{
    display: grid !important;
    grid-template-columns: clamp(8.4rem, 10.5vw, 10.5rem) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    border-left: 1px solid rgba(31,35,38,.13) !important;
    border-right: 1px solid rgba(31,35,38,.13) !important;
    border-bottom: 1px solid rgba(31,35,38,.13) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.27) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset !important;
    margin-top: 0 !important;
    margin-bottom: clamp(.72rem, .42rem + .55vh, 1rem) !important;
  }

  .selected-experience h2,
  .selected-experience .experience-list{
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: .50rem .86rem .52rem !important;
    border-top: 0 !important;
  }

  .selected-experience h2{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: flex-start !important;
    border-right: 1px solid rgba(31,35,38,.105) !important;
    border-bottom: 0 !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: .62rem !important;
    line-height: 1.20 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
  }

  .selected-experience .experience-list{
    flex-wrap: wrap !important;
    gap: .18rem .42rem !important;
    border: 0 !important;
    font-size: .69rem !important;
    line-height: 1.25 !important;
    letter-spacing: .005em !important;
    color: var(--ink-faint) !important;
  }

  .selected-experience .experience-list:first-of-type{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .selected-experience .experience-list + .experience-list{
    grid-column: 3 !important;
    grid-row: 1 !important;
    border-left: 1px solid rgba(31,35,38,.085) !important;
    border-top: 0 !important;
  }

  .experience-list span{
    display: inline-flex !important;
    align-items: center !important;
    white-space: normal !important;
  }

  .experience-list span:not(:last-child)::after{
    content: "·" !important;
    color: var(--gold-soft) !important;
    margin-left: .42rem !important;
  }
}

@media (min-width: 1181px){
  .selected-experience .experience-list{
    font-size: .715rem !important;
    line-height: 1.26 !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px){
  .lead{
    line-height: 1.53 !important;
    margin-bottom: .86rem !important;
  }

  .supporting{
    line-height: 1.55 !important;
  }

  .selected-experience{
    grid-template-columns: minmax(7.9rem, 9rem) minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .selected-experience h2,
  .selected-experience .experience-list{
    padding: .44rem .72rem .46rem !important;
  }

  .selected-experience h2{
    font-size: .58rem !important;
    line-height: 1.18 !important;
    letter-spacing: .165em !important;
  }

  .selected-experience .experience-list{
    font-size: .64rem !important;
    line-height: 1.22 !important;
    gap: .14rem .34rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .34rem !important;
  }
}

/* Awkward middle widths: keep the elegant left label, but stack the two item lists on the right so the strip does not implode. */
@media (min-width: 701px) and (max-width: 980px){
  .lead{
    line-height: 1.51 !important;
    margin-bottom: .78rem !important;
  }

  .supporting{
    line-height: 1.53 !important;
  }

  .selected-experience{
    display: grid !important;
    grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    border: 1px solid var(--line-strong) !important;
    border-top: 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    background: rgba(255,255,255,.34) !important;
  }

  .selected-experience h2{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-items: center !important;
    border-right: 1px solid rgba(31,35,38,.105) !important;
    border-bottom: 0 !important;
    padding: .48rem .78rem !important;
    font-size: .58rem !important;
    line-height: 1.22 !important;
    letter-spacing: .17em !important;
  }

  .selected-experience .experience-list{
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    padding: .42rem .78rem .44rem !important;
    font-size: .64rem !important;
    line-height: 1.25 !important;
    gap: .14rem .34rem !important;
    border-left: 0 !important;
    border-top: 0 !important;
  }

  .selected-experience .experience-list:first-of-type{
    grid-row: 1 !important;
  }

  .selected-experience .experience-list + .experience-list{
    grid-column: 2 !important;
    grid-row: 2 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(31,35,38,.075) !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .34rem !important;
  }
}

@media (min-width: 701px) and (max-width: 980px) and (max-height: 760px){
  .lead{
    line-height: 1.49 !important;
    margin-bottom: .70rem !important;
  }

  .supporting{
    line-height: 1.50 !important;
  }

  .selected-experience h2{
    padding-top: .38rem !important;
    padding-bottom: .38rem !important;
    font-size: .54rem !important;
    line-height: 1.22 !important;
  }

  .selected-experience .experience-list{
    padding-top: .33rem !important;
    padding-bottom: .34rem !important;
    font-size: .59rem !important;
    line-height: 1.22 !important;
    gap: .11rem .30rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .30rem !important;
  }
}

@media (max-width: 700px){
  .lead{
    line-height: 1.54 !important;
    margin-bottom: .84rem !important;
  }

  .supporting{
    line-height: 1.56 !important;
  }

  .selected-experience{
    display: block !important;
    margin-top: .72rem !important;
    padding: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.40) !important;
    box-shadow: none !important;
  }

  .selected-experience h2{
    display: block !important;
    margin: 0 !important;
    padding: .68rem .94rem .62rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(31,35,38,.09) !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: .68rem !important;
    line-height: 1.22 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
  }

  .selected-experience .experience-list{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .16rem .38rem !important;
    margin: 0 !important;
    padding: .68rem .94rem !important;
    border: 0 !important;
    font-size: .76rem !important;
    line-height: 1.36 !important;
    color: var(--ink-faint) !important;
  }

  .selected-experience .experience-list + .experience-list{
    border-top: 1px solid rgba(31,35,38,.10) !important;
  }

  .experience-list span:not(:last-child)::after{
    content: "·" !important;
    color: var(--gold-soft) !important;
    margin-left: .38rem !important;
  }
}

/* v73: restore the sleeker selected-experience shape, add the missing separator, and force the original v64 PNG favicon in HTML. */
@media (min-width: 701px){
  .services{
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .selected-experience{
    display: grid !important;
    grid-template-columns: clamp(8.75rem, 11vw, 10.75rem) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: clamp(.72rem, .42rem + .55vh, 1rem) !important;
    border: 1px solid rgba(31,35,38,.13) !important;
    border-top: 1px solid rgba(31,35,38,.15) !important;
    border-radius: 0 0 1rem 1rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.28) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset !important;
  }

  .selected-experience h2,
  .selected-experience .experience-list{
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: .50rem .86rem .52rem !important;
    border: 0 !important;
  }

  .selected-experience h2{
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-right: 1px solid rgba(31,35,38,.105) !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: .62rem !important;
    line-height: 1.18 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: var(--gold) !important;
  }

  .selected-experience .experience-list{
    flex-wrap: wrap !important;
    gap: .18rem .42rem !important;
    font-size: .69rem !important;
    line-height: 1.25 !important;
    letter-spacing: .005em !important;
    color: var(--ink-faint) !important;
  }

  .selected-experience .experience-list:first-of-type{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .selected-experience .experience-list + .experience-list{
    grid-column: 3 !important;
    grid-row: 1 !important;
    border-left: 1px solid rgba(31,35,38,.085) !important;
  }

  .experience-list span{
    display: inline-flex !important;
    align-items: center !important;
    white-space: normal !important;
  }

  .experience-list span:not(:last-child)::after{
    content: "·" !important;
    color: var(--gold-soft) !important;
    margin-left: .42rem !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px){
  .selected-experience{
    grid-template-columns: minmax(8rem, 9.4rem) minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .selected-experience h2,
  .selected-experience .experience-list{
    padding: .44rem .72rem .46rem !important;
  }

  .selected-experience h2{
    font-size: .58rem !important;
    letter-spacing: .165em !important;
  }

  .selected-experience .experience-list{
    font-size: .64rem !important;
    line-height: 1.22 !important;
    gap: .14rem .34rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .34rem !important;
  }
}

/* The awkward middle zone: keep the handsome left label, but stack lists on the right with a clear top separator. */
@media (min-width: 701px) and (max-width: 980px){
  .selected-experience{
    display: grid !important;
    grid-template-columns: minmax(8.65rem, 10rem) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    border: 1px solid var(--line-strong) !important;
    border-top: 1px solid rgba(31,35,38,.15) !important;
    border-radius: 0 0 1rem 1rem !important;
    background: rgba(255,255,255,.34) !important;
  }

  .selected-experience h2{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    border-right: 1px solid rgba(31,35,38,.105) !important;
    padding: .48rem .78rem !important;
    font-size: .58rem !important;
    line-height: 1.22 !important;
    letter-spacing: .17em !important;
  }

  .selected-experience .experience-list{
    grid-column: 2 !important;
    padding: .42rem .78rem .44rem !important;
    font-size: .64rem !important;
    line-height: 1.25 !important;
    gap: .14rem .34rem !important;
  }

  .selected-experience .experience-list:first-of-type{
    grid-row: 1 !important;
  }

  .selected-experience .experience-list + .experience-list{
    grid-column: 2 !important;
    grid-row: 2 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(31,35,38,.075) !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .34rem !important;
  }
}

@media (min-width: 701px) and (max-width: 980px) and (max-height: 760px){
  .selected-experience h2{
    padding-top: .38rem !important;
    padding-bottom: .38rem !important;
    font-size: .54rem !important;
  }

  .selected-experience .experience-list{
    padding-top: .33rem !important;
    padding-bottom: .34rem !important;
    font-size: .59rem !important;
    line-height: 1.22 !important;
    gap: .11rem .30rem !important;
  }

  .experience-list span:not(:last-child)::after{
    margin-left: .30rem !important;
  }
}

@media (max-width: 700px){
  .selected-experience{
    border-top: 1px solid var(--line-strong) !important;
  }
}

/* v78: mobile-landscape / narrow-tablet service separator fix.
   The previous cascade left the original desktop right borders on the service cards,
   so the 2x2 layout was drawing two 1px borders on the centre divide. Humanity survived, CSS barely did. */
@media (min-width:701px) and (max-width:1180px){
  .services{
    border:1px solid rgba(31,35,38,.13) !important;
    border-bottom:0 !important;
    border-radius:1rem 1rem 0 0 !important;
    overflow:hidden !important;
  }

  .service-card{
    border:0 !important;
  }

  .service-card:nth-child(2),
  .service-card:nth-child(4){
    border-left:1px solid rgba(31,35,38,.13) !important;
  }

  .service-card:nth-child(3),
  .service-card:nth-child(4){
    border-top:1px solid rgba(31,35,38,.13) !important;
  }
}

/* v79: desktop/narrow-desktop separator correction.
   v78 fixed the 2x2 service grid, but accidentally applied those borders up to 1180px.
   At narrow desktop widths the cards are still in one row, so this restores single vertical dividers
   and removes the false top border above Quality Review / Process Improvement. */
@media (min-width:901px) and (max-width:1180px){
  .services{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    border:1px solid rgba(31,35,38,.13) !important;
    border-bottom:0 !important;
    border-radius:1rem 1rem 0 0 !important;
    overflow:hidden !important;
  }

  .service-card{
    border:0 !important;
    border-right:1px solid rgba(31,35,38,.13) !important;
  }

  .service-card:last-child{
    border-right:0 !important;
  }

  .service-card:nth-child(3),
  .service-card:nth-child(4){
    border-top:0 !important;
  }
}

/* Keep the previous 2x2 separator fix only where the services actually become 2x2. */
@media (min-width:701px) and (max-width:900px){
  .services{
    border:1px solid rgba(31,35,38,.13) !important;
    border-bottom:0 !important;
    border-radius:1rem 1rem 0 0 !important;
    overflow:hidden !important;
  }

  .service-card{
    border:0 !important;
  }

  .service-card:nth-child(2),
  .service-card:nth-child(4){
    border-left:1px solid rgba(31,35,38,.13) !important;
  }

  .service-card:nth-child(3),
  .service-card:nth-child(4){
    border-top:1px solid rgba(31,35,38,.13) !important;
  }
}

/* v80: narrow-desktop service divider cleanup.
   Removes the leftover 2x2 left borders from cards 2 and 4 when the services are in a four-column row. */
@media (min-width:901px) and (max-width:1180px){
  .service-card:nth-child(2),
  .service-card:nth-child(4){
    border-left:0 !important;
  }

  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3){
    border-right:1px solid rgba(31,35,38,.13) !important;
  }

  .service-card:nth-child(4){
    border-right:0 !important;
  }
}

/* v81: Selected Experience trim for cleaner mobile weight. */


/* v84: equalise Selected Experience mobile spacing.
   Removes the leftover sibling margin that made the gap below the capabilities list look larger than the sectors list on mobile/narrow widths. */
@media (max-width: 700px){
  .selected-experience .experience-list + .experience-list{
    margin-top: 0 !important;
    padding-top: .68rem !important;
  }
}

/* v85: centre the contact divider properly between Email and LinkedIn.
   The previous link bottom padding made the separator feel like it was floating at slightly different heights.
   This keeps the text line boxes cleaner and anchors the gold divider to the visual centre. */
.top-links{
  align-items:center;
  line-height:1;
}

.top-links a{
  display:inline-flex;
  align-items:center;
  line-height:1;
  padding-bottom:0 !important;
}

.top-links a::after{
  left:0;
  right:0;
  bottom:-0.24rem;
}

.top-links span{
  display:block;
  align-self:center;
  width:1px;
  height:.95em !important;
  margin:0 .04rem;
  transform:translateY(.02em);
}

@media (max-width: 700px){
  .top-links span{
    height:.95em !important;
  }

  .top-links a::after{
    bottom:-.18rem;
  }
}

@media (max-width: 430px){
  .top-links span{
    height:.95em !important;
  }

  .top-links a::after{
    bottom:-.14rem;
  }
}

/* v86: make the header contact divider a touch taller so it visually matches the credibility separators more closely. */
.top-links span{
  height:1.08em !important;
}

@media (max-width: 700px){
  .top-links span{
    height:1.08em !important;
  }
}

@media (max-width: 430px){
  .top-links span{
    height:1.08em !important;
  }
}


/* v88: accessibility and Reader View polish.
   Keeps the visual design intact while adding real text spacing, clearer keyboard focus,
   a light-only colour scheme declaration and a small readability lift for faint copy. */
:root{
  --ink-faint:rgba(31,35,38,.60);
}

html{
  color-scheme:only light;
}

.kicker-title::before{
  content:"" !important;
}

.kicker-separator{
  display:inline-block;
  margin:0 .52em;
  color:var(--gold-soft);
}

.site-frame a:focus-visible{
  outline:2px solid rgba(180,143,70,.92) !important;
  outline-offset:4px !important;
}

/* Keep header link underline position unchanged; no enlarged min-height here. */

@media(max-width:700px){
  .kicker-separator{
    display:none !important;
  }
}