@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#0b1720;--blue:#581e00;--Orange-Yellow:#ec9e1c;--paper:#f6f5f1;--white:#fff;--muted:#aab2b7;--line:rgba(11,23,32,.14);--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:90px}body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.announcement{background:var(--ink);color:#cbd0d3;text-align:center;padding:10px 20px;font-size:11px;letter-spacing:.08em}.status-dot,.--dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--Orange-Yellow);margin-right:8px}.announcement-divider{margin:0 10px;color:#68757b}.site-header{position:sticky;top:0;z-index:100;background:rgba(246,245,241,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(11,23,32,.07)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:39px;height:39px;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 25px var(--display);letter-spacing:-.08em}.brand-mark span{color:var(--Orange-Yellow)}.brand-name{font:800 12px/1.15 var(--display);letter-spacing:.12em}.brand-name span{display:block;font-size:9px;letter-spacing:.3em;margin-top:4px;color:#657078}.nav-links{display:flex;align-items:center;gap:34px;font-size:12px;font-weight:600}.nav-links>a:not(.nav-cta){transition:color .2s}.nav-links>a:not(.nav-cta):hover,.text-link:hover{color:var(--Orange-Yellow)}.nav-cta{background:var(--Orange-Yellow);padding:13px 18px;color:#111;font-weight:700}.nav-cta span{margin-left:12px}.menu-toggle{display:none;background:none;border:0}.hero{min-height:660px;padding-top:86px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;position:relative;padding-bottom:90px}.eyebrow{font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:10px;color:#647078}.eyebrow-line{width:25px;height:2px;background:var(--Orange-Yellow);display:inline-block}.hero h1,.section-heading h2,.statement-grid h2,.contact-inner h2{font:700 clamp(42px,5.2vw,70px)/1.1 var(--display);letter-spacing:-.065em;margin:25px 0 23px}.hero h1 em,.section-heading h2 em,.statement-grid h2 em,.contact-inner h2 em{font-style:normal;color:var(--Orange-Yellow)}.hero-intro{max-width:475px;font-size:15px;color:#657078;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:31px}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:16px 20px;font-size:12px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--Orange-Yellow);color:#15191b}.button-primary:hover{background:#ff9143}.text-link{font-size:12px;font-weight:700;border-bottom:1px solid #c4c7c7;padding-bottom:5px}.text-link span{margin-left:9px}.hero-proof{display:flex;align-items:center;gap:14px;margin-top:47px}.proof-avatars{display:flex}.proof-avatars span{width:32px;height:32px;border:2px solid var(--paper);border-radius:50%;background:var(--blue);color:white;display:grid;place-items:center;font-size:12px;margin-left:-7px}.proof-avatars span:first-child{margin-left:0;background:var(--Orange-Yellow);color:var(--ink)}.proof-avatars span:last-child{background:#d6ded8;color:var(--ink)}.hero-proof p{font-size:10px;color:#7a8489;line-height:1.65}.hero-proof strong{color:var(--ink);font-size:11px}.hero-art{height:455px;position:relative;display:grid;place-items:center;isolation:isolate}.hero-art:before{content:"";position:absolute;width:310px;height:310px;border-radius:50%;background:#e5e5dc;z-index:-2}.art-orbit{position:absolute;border:1px solid rgba(15,62,82,.23);border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:460px;height:230px}.orbit-two{width:430px;height:330px;transform:rotate(42deg)}.art-card{position:absolute;width:260px;height:320px;box-shadow:0 25px 70px #0b172026}.card-back{background:var(--blue);color:white;transform:rotate(-10deg) translate(-45px,-5px);padding:27px;display:flex;flex-direction:column;justify-content:space-between}.card-back span{font:800 39px/.96 var(--display);letter-spacing:-.06em}.card-back small{font-size:9px;letter-spacing:.2em}.card-front{background:var(--Orange-Yellow);transform:rotate(8deg) translate(36px,10px);padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}.art-card-top,.art-card-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;font-weight:800}.art-card-top span:last-child{text-align:right;line-height:1.4}.art-symbol{font:800 150px/.8 var(--display);letter-spacing:-.13em;text-align:center}.art-symbol span{color:white}.art-card-bottom span:first-child{line-height:1.4}.floating-tag{position:absolute;background:white;padding:12px 15px;box-shadow:0 10px 35px #0b172012;font-size:9px;letter-spacing:.12em;font-weight:800}.tag-top{top:51px;right:2px;transform:rotate(5deg)}.tag-top span{color:var(--Orange-Yellow);margin-left:10px}.tag-bottom{bottom:44px;left:0;transform:rotate(-4deg)}.tag-dot{margin:0 7px 0 0}.hero-art-caption{position:absolute;bottom:2px;right:5px;font-size:9px;letter-spacing:.2em;color:#7a8489}.hero-bottom{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:space-between;color:#8b9397;font-size:9px;letter-spacing:.15em}.scroll-arrow{color:var(--Orange-Yellow);font-size:15px;margin-left:8px}.ticker{overflow:hidden;background:var(--blue);color:#fff;padding:17px 0}.ticker-track{display:flex;align-items:center;justify-content:space-around;gap:35px;min-width:850px;font:700 11px var(--display);letter-spacing:.1em;text-transform:uppercase}.ticker b{color:var(--Orange-Yellow);font-size:17px}.section{padding:115px 0}.work-section{background:#fff}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:48px}.section-heading h2{font-size:clamp(38px,4.3vw,57px);margin:20px 0 0}.section-aside{max-width:330px;color:#758087;font-size:13px;line-height:1.9;margin-bottom:5px}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}.filter-btn{border:1px solid #dfe1df;background:transparent;padding:10px 15px;font-size:11px;color:#667177;cursor:pointer;transition:.2s}.filter-btn span{margin-left:10px;color:var(--Orange-Yellow)}.filter-btn.active,.filter-btn:hover{background:var(--ink);border-color:var(--ink);color:white}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:43px 26px}.project-card{min-width:0;transition:opacity .25s,transform .25s}.project-card.hidden{display:none}.project-image{display:block;overflow:hidden;position:relative}.project-visual{height:315px;position:relative;overflow:hidden;transition:transform .5s}.project-image:hover .project-visual{transform:scale(1.025)}.project-large .project-visual{height:390px}.visual-label{position:absolute;top:22px;left:23px;font-size:8px;letter-spacing:.17em;font-weight:700;z-index:2}.visual-index{position:absolute;bottom:18px;right:20px;font-size:10px;font-weight:700;opacity:.7}.crony-visual{background:#e4d8f3;color:#34264d;padding:36px;isolation:isolate}.crony-word{font:800 clamp(85px,11vw,145px)/.9 var(--display);letter-spacing:-.1em;position:absolute;left:7%;top:29%;z-index:1}.crony-word span{font-size:20px;vertical-align:top;letter-spacing:0}.crony-visual>p{position:absolute;bottom:45px;left:37px;font-size:13px;line-height:1.3;font-weight:600}.crony-shape{position:absolute;border-radius:50%;border:1px solid #34264d66}.shape-a{width:330px;height:330px;right:-70px;top:25px}.shape-b{width:250px;height:250px;right:-30px;top:65px}.mutual-visual{background:#dfe8e0;color:#173d34;padding:28px}.mutual-seal{position:absolute;right:28px;top:65px;width:88px;height:88px;border:1px solid #173d34;border-radius:50%;display:grid;place-items:center;font:700 47px var(--display)}.mutual-seal span{color:var(--Orange-Yellow)}.mutual-visual h4{position:absolute;left:28px;bottom:62px;font:800 57px/.85 var(--display);letter-spacing:-.07em}.mutual-visual h4 em{font-style:normal;color:#648875}.mutual-footer{position:absolute;left:29px;bottom:25px;font-size:8px;letter-spacing:.12em}.isibane-visual{background:#f0b74b;color:#153e34;padding:28px}.sun-mark{position:absolute;right:32px;top:65px;font-size:130px;line-height:1;color:#fff2d0}.isibane-visual h4{position:absolute;left:28px;top:39%;font:800 31px/.95 var(--display);letter-spacing:-.04em}.isibane-visual h4 span{display:block;font:700 9px var(--font);letter-spacing:.2em;margin-top:9px}.isibane-bottom{position:absolute;bottom:28px;left:28px;font:600 18px/1.3 var(--display)}.vusi-visual{background:#102d48;color:#fff;padding:28px}.vusi-emblem{position:absolute;right:30px;top:65px;width:76px;height:76px;border:2px solid var(--Orange-Yellow);border-radius:50%;display:grid;place-items:center;font:800 44px var(--display)}.vusi-emblem span{color:var(--Orange-Yellow);font-size:19px}.vusi-visual h4{position:absolute;left:28px;top:35%;font:800 51px/.86 var(--display);letter-spacing:-.06em}.vusi-visual>p{position:absolute;bottom:30px;left:28px;color:#ff9a48;font-size:13px;line-height:1.4}.pipe-line{position:absolute;right:-25px;bottom:-75px;width:210px;height:190px;border:18px solid #dbe4e8;border-radius:70px;opacity:.14}.afto-visual{background:#e5eee9;color:#16493e;padding:28px}.afto-sun{position:absolute;right:32px;top:50px;font-size:130px;color:#f0a13c}.afto-visual h4{position:absolute;left:28px;top:40%;font:800 55px/.9 var(--display);letter-spacing:-.07em}.afto-visual h4 span{display:block;font-size:12px;letter-spacing:.34em;margin-top:8px}.afto-wave{position:absolute;left:-20px;right:-20px;bottom:22px;height:70px;border-top:2px solid #16493e;border-radius:50%;transform:rotate(-8deg)}.afto-bottom{position:absolute;bottom:28px;right:25px;font-size:8px;letter-spacing:.13em}.summit-visual{background:#dce4ee;color:#1d3552;padding:28px}.summit-icon{position:absolute;right:35px;top:55px;font-size:110px;color:#7d98b4;transform:rotate(-30deg)}.summit-visual h4{position:absolute;left:28px;top:37%;font:800 48px/.86 var(--display);letter-spacing:-.07em}.summit-visual h4 em{font-style:normal;color:#547493}.summit-visual>p{position:absolute;left:30px;bottom:33px;font-size:9px;letter-spacing:.25em}.summit-lines{position:absolute;right:-40px;bottom:-60px;width:250px;height:180px;border:1px solid #1d355255;transform:rotate(-35deg)}.project-meta{display:flex;justify-content:space-between;align-items:flex-start;padding-top:17px}.project-meta h3{font:700 17px var(--display);letter-spacing:-.03em}.project-meta p{font-size:11px;color:#879096;margin-top:5px}.project-arrow{font-size:21px;transition:transform .2s}.project-card:hover .project-arrow{transform:translate(3px,-3px);color:var(--Orange-Yellow)}.portfolio-note{font-size:11px;color:#858d91;margin-top:38px;line-height:1.7}.portfolio-note span{color:var(--Orange-Yellow);font-size:15px;margin-right:6px}.statement-section{background:var(--ink);color:white;padding:110px 0}.statement-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px}.statement-grid .eyebrow{color:#a9b1b6}.statement-grid h2{font-size:clamp(35px,4.4vw,57px);margin:0 0 25px;max-width:800px}.statement-copy{max-width:610px;color:#aeb7bc;font-size:14px;line-height:1.95;margin-bottom:28px}.light-link{display:inline-block;color:#fff;border-color:#526068}.services-section{background:var(--paper)}.services-list{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:65px 1fr 30px;gap:20px;align-items:start;padding:29px 0;border-bottom:1px solid var(--line);transition:padding .2s}.service-row:hover{padding-left:8px}.service-number{font-size:10px;color:var(--Orange-Yellow);font-weight:700;padding-top:6px}.service-row h3{font:700 21px var(--display);letter-spacing:-.04em}.service-row p{font-size:12px;color:#788188;max-width:560px;margin-top:8px;line-height:1.8}.service-icon{font-size:21px;justify-self:end}.process-section{padding:110px 0;background:#e9e9e2}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:58px}.process-grid article{border-top:1px solid #c5c9c4;padding-top:20px}.process-grid article>span{font-size:10px;color:var(--Orange-Yellow);font-weight:700}.process-grid h3{font:700 19px var(--display);margin:22px 0 10px}.process-grid p{font-size:12px;color:#6f797d;line-height:1.8}.contact-section{background:var(--blue);color:white;padding:105px 0}.contact-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}.contact-inner .eyebrow{color:#c1ccd0}.contact-inner h2{font-size:clamp(42px,5vw,64px);margin:23px 0}.contact-copy{max-width:390px;color:#c1ccd0;font-size:13px;line-height:1.9}.contact-panel{background:#fff;color:var(--ink);padding:35px}.panel-label{font-size:9px;letter-spacing:.18em;color:#7d878b;font-weight:700;margin-bottom:18px}.contact-email{font:700 clamp(16px,2vw,22px) var(--display);letter-spacing:-.04em;display:flex;justify-content:space-between;gap:10px;padding-bottom:20px;border-bottom:1px solid #e0e2df}.contact-email span{color:var(--Orange-Yellow)}.contact-small{font-size:11px;color:#798287;line-height:1.8;margin:20px 0}.button-wide{width:100%}.tiny{font-size:9px;margin-bottom:0}.tiny code{background:#f1f1ee;padding:2px 4px}.footer{background:#081118;color:white;padding:30px 0 20px}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:27px;border-bottom:1px solid #29343b}.footer-brand .brand-mark{background:var(--Orange-Yellow);color:var(--ink)}.footer-brand .brand-mark span{color:white}.footer-brand .brand-name span{color:#8f9ba1}.footer-top>p{font-size:11px;color:#a5afb4}.back-top{font-size:11px;color:#d5dbdd}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;color:#7d8a91;font-size:9px}.footer-bottom div{display:flex;gap:20px}.footer-bottom a:hover{color:var(--Orange-Yellow)}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media(min-width:1200px){.hero{min-height:700px}.hero-art{transform:translateX(10px)}}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:65px;gap:15px}.hero-copy{max-width:650px}.hero-art{height:420px;margin-top:10px}.hero-bottom{bottom:16px}.section{padding:85px 0}.section-heading{align-items:flex-start;flex-direction:column;gap:20px}.section-aside{max-width:500px}.statement-grid{grid-template-columns:1fr;gap:30px}.contact-inner{grid-template-columns:1fr;gap:35px}.contact-panel{max-width:600px}.process-grid{grid-template-columns:1fr 1fr;row-gap:35px}.project-large .project-visual{height:330px}.project-visual{height:280px}}
@media(max-width:620px){.container{width:min(100% - 34px,1180px)}.announcement{font-size:9px;letter-spacing:.04em}.nav{height:70px}.menu-toggle{display:flex;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}.menu-toggle span{height:2px;width:22px;background:var(--ink);transition:.2s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}.nav-links{position:absolute;top:70px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:22px 24px 26px;display:none;flex-direction:column;align-items:stretch;gap:18px}.nav-links.open{display:flex}.nav-links>a{padding:8px 0}.nav-links .nav-cta{text-align:center;padding:14px}.hero{padding-top:53px;padding-bottom:72px;min-height:0}.hero h1{font-size:clamp(39px,11vw,57px)}.hero-intro{font-size:13px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-proof{margin-top:30px}.hero-art{height:355px;margin-top:5px;transform:scale(.9);transform-origin:center}.art-card{width:215px;height:270px}.card-back span{font-size:32px}.art-symbol{font-size:125px}.orbit-one{width:350px;height:190px}.orbit-two{width:350px;height:270px}.hero-art:before{width:245px;height:245px}.tag-top{right:-5px;top:20px}.tag-bottom{left:-5px;bottom:25px}.hero-art-caption{bottom:-4px}.hero-bottom{font-size:8px;letter-spacing:.08em}.ticker-track{justify-content:flex-start;animation:marquee 23s linear infinite;width:max-content}.ticker{padding:14px 0}.ticker-track span{white-space:nowrap}@keyframes marquee{to{transform:translateX(-45%)}}.section{padding:72px 0}.section-heading{margin-bottom:32px}.section-heading h2{font-size:40px}.filter-row{gap:6px}.filter-btn{padding:9px 10px;font-size:10px}.project-grid{grid-template-columns:1fr;gap:30px}.project-large .project-visual,.project-visual{height:310px}.crony-word{font-size:105px}.crony-visual>p{bottom:35px}.mutual-visual h4{font-size:54px}.isibane-visual h4{font-size:29px}.vusi-visual h4{font-size:48px}.statement-section,.contact-section{padding:75px 0}.statement-grid h2{font-size:39px}.service-row{grid-template-columns:30px 1fr 20px;gap:12px;padding:24px 0}.service-row h3{font-size:17px}.service-row p{font-size:11px}.process-grid{grid-template-columns:1fr 1fr;gap:28px 18px;margin-top:40px}.process-grid h3{font-size:17px}.contact-inner h2{font-size:45px}.contact-panel{padding:24px 20px}.contact-email{font-size:16px}.footer-top{align-items:flex-start;gap:18px;flex-wrap:wrap}.footer-top>p{order:3;width:100%}.footer-bottom{align-items:flex-start;flex-direction:column;gap:13px}.footer-bottom div{gap:16px}.portfolio-note{margin-top:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* Portrait section */
.portrait-frame {
  position: absolute;
  z-index: 2;
  width: 320px;
  height:450px;
  overflow: hidden;
  background: #ec9e1c;
  border: 1px solid rgba(255, 123, 28, 0.65);
  border-radius: 145px 145px 12px 12px;
  box-shadow: 0 25px 70px rgba(11, 23, 32, 0.2);
  transform: rotate(3deg);
  transition: transform 0.4s ease;
}

.portrait-frame:hover {
  transform: rotate(0deg) translateY(-5px);
}

.portrait-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  object-position: center center;
}

/* Name and role overlay */

/* Portrait label overlay */
.portrait-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 35px 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(11, 23, 32, 0.65) 45%,
    rgba(11, 23, 32, 0.95) 100%
  );
  z-index: 3;
}

/* Dangton Designs PNG logo */
.portrait-brand {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.portrait-brand img {
  display: block;
  width: 125px;
  max-width: 100%;
  height: auto;
  max-height: 45px;
  object-fit: contain;
  object-position: left center;
}

/* Creative Strategist text */
.portrait-role {
  flex-shrink: 0;
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: right;
}

/* Mobile adjustments */
@media (max-width: 620px) {
  .portrait-label {
    padding: 30px 14px 15px;
    gap: 8px;
  }

  .portrait-brand img {
    width: 105px;
    max-height: 38px;
  }

  .portrait-role {
    font-size: 8px;
    letter-spacing: 0.8px;
  }
}

.portrait-brand {
  font: 800 27px 'Manrope', sans-serif;
  letter-spacing: -2px;
}

.portrait-brand span {
  color: #ff7b1c;
}

.portrait-role {
  font: 700 9px/1.5 'DM Sans', sans-serif;
  letter-spacing: 1.2px;
  text-align: right;
}

/* Keep the orbit decorations behind the portrait */
.orbit-one,
.orbit-two {
  z-index: -1;
}

/* Mobile responsiveness */
@media (max-width: 620px) {
  .portrait-frame {
    width: 235px;
    height: 305px;
  }

  .hero-art {
    height: 355px;
  }

  .tag-top {
    right: 0;
  }

  .tag-bottom {
    left: 0;
  }
}

.dangton-brandmark{
  display: block;
  width: 20px;
  height: auto;
  max-height: 190px;
  object-fit: contain;
  object-position: left center;
}
/* ==========================================================
   SERVICE-BASED WORK GALLERY
   The gallery opens on Logo Design; buttons switch categories.
   ========================================================== */
.work-section {
  position: relative;
  padding: 112px 0 118px;
  background: #fff;
}
.section-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.work-layout {
  display: grid;
  grid-template-columns: minmax(215px, 0.72fr) minmax(0, 1.7fr);
  align-items: start;
  gap: clamp(28px, 4vw, 58px);
}
.service-selector {
  position: sticky;
  top: 112px;
  border-top: 1px solid var(--line);
}
.selector-label {
  color: #858d91;
  font-size: 9px;
  letter-spacing: .17em;
  font-weight: 700;
  padding: 18px 0 12px;
}
.service-option {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 17px 12px;
  text-align: left;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, padding .22s ease;
}
.service-option:hover,
.service-option:focus-visible {
  background: #f3f1ec;
  padding-left: 17px;
  outline: none;
}
.service-option.active {
  background: var(--ink);
  color: #fff;
  border-bottom-color: var(--ink);
}
.service-option-number {
  color: var(--Orange-Yellow);
  font-size: 9px;
  font-weight: 700;
}
.service-option-text {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.service-option-arrow {
  justify-self: end;
  font-size: 16px;
  color: var(--Orange-Yellow);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .2s ease, transform .2s ease;
}
.service-option.active .service-option-arrow,
.service-option:hover .service-option-arrow,
.service-option:focus-visible .service-option-arrow {
  opacity: 1;
  transform: translate(0, 0);
}
.selector-note {
  padding: 22px 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.selector-note-mark {
  color: var(--Orange-Yellow);
  font-size: 19px;
  line-height: 1.1;
}
.selector-note p {
  color: #7c858b;
  font-size: 11px;
  line-height: 1.8;
}
.project-area {
  min-width: 0;
}
.project-area-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 25px;
}
.project-kicker {
  color: var(--Orange-Yellow);
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 700;
  margin-bottom: 9px;
}
.project-area-heading h3 {
  font: 700 clamp(27px, 3vw, 38px)/1.1 var(--display);
  letter-spacing: -.055em;
  margin-bottom: 10px;
}
.project-area-heading > div > p:last-child {
  color: #788188;
  max-width: 520px;
  font-size: 12px;
  line-height: 1.8;
}
.project-count {
  flex-shrink: 0;
  border: 1px solid var(--line);
  padding: 8px 10px;
  color: #69747a;
  font-size: 8px;
  letter-spacing: .12em;
  font-weight: 700;
  margin-top: 4px;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 20px;
}
.project-card {
  min-width: 0;
  transition: transform .25s ease;
}
.project-card:hover {
  transform: translateY(-3px);
}
.project-image.project-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.project-thumbnail {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--project-accent, #e6e5de);
  isolation: isolate;
}
.project-thumbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--project-accent, #d7d7d0), #f3f1ec);
}
.project-thumbnail > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .25s ease;
}
.project-thumbnail > img.image-missing {
  display: none;
}
.thumbnail-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--ink);
  font: 800 clamp(22px, 2.7vw, 35px)/1.08 var(--display);
  letter-spacing: -.06em;
  text-align: center;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, var(--project-accent, #d7d7d0), #f3f1ec);
}
.project-thumbnail.has-fallback .thumbnail-fallback {
  display: flex;
}
.project-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 17px;
  color: #fff;
  font-size: 9px;
  letter-spacing: .12em;
  font-weight: 700;
  background: linear-gradient(transparent 40%, rgba(11, 23, 32, .78));
  opacity: 0;
  transition: opacity .25s ease;
}
.project-image-overlay .overlay-arrow {
  font-size: 21px;
  letter-spacing: 0;
}
.project-image.project-open:hover .project-thumbnail > img,
.project-image.project-open:focus-visible .project-thumbnail > img {
  transform: scale(1.055);
}
.project-image.project-open:hover .project-image-overlay,
.project-image.project-open:focus-visible .project-image-overlay {
  opacity: 1;
}
.project-image.project-open:focus-visible {
  outline: 2px solid var(--Orange-Yellow);
  outline-offset: 4px;
}
.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-top: 13px;
}
.project-meta h4 {
  font: 700 15px/1.35 var(--display);
  letter-spacing: -.03em;
}
.project-meta p {
  margin-top: 5px;
  color: #879096;
  font-size: 10px;
  line-height: 1.65;
}
.project-arrow {
  flex-shrink: 0;
  font-size: 19px;
  transition: transform .2s ease, color .2s ease;
}
.project-card:hover .project-arrow {
  transform: translate(3px, -3px);
  color: var(--Orange-Yellow);
}
.placeholder-notice {
  margin-top: 29px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: #838c91;
  font-size: 10px;
  line-height: 1.8;
}
.placeholder-notice span {
  margin-right: 7px;
  color: var(--Orange-Yellow);
  font-size: 15px;
}

/* Clickable project detail dialog */
.project-dialog {
  width: min(850px, calc(100% - 28px));
  max-width: 850px;
  max-height: min(90vh, 900px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .25);
}
.project-dialog::backdrop {
  background: rgba(6, 14, 19, .76);
  backdrop-filter: blur(5px);
}
.dialog-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 12px 12px -50px 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .15);
}

/* Project detail image — display the complete artwork */
.dialog-media {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 72vh;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #e8e7e1;
}

.dialog-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
  object-position: center;
}

.dialog-content {
  padding: clamp(23px, 5vw, 44px);
}
.dialog-kicker {
  color: var(--Orange-Yellow);
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 700;
  margin-bottom: 12px;
}
.dialog-content h2 {
  font: 700 clamp(28px, 4vw, 43px)/1.1 var(--display);
  letter-spacing: -.05em;
  margin-bottom: 14px;
}
.dialog-content > p:not(.dialog-kicker) {
  color: #6f797f;
  font-size: 13px;
  line-height: 1.9;
  max-width: 650px;
}
.dialog-contact {
  margin-top: 25px;
}

@media (max-width: 950px) {
  .work-section { padding: 86px 0 90px; }
  .work-layout { grid-template-columns: 1fr; gap: 36px; }
  .service-selector { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .selector-label, .selector-note { grid-column: 1 / -1; }
  .selector-label { padding-top: 0; }
  .selector-note { padding-top: 18px; }
  .service-option { min-height: 58px; }
}
@media (max-width: 620px) {
  .work-section { padding: 70px 0 76px; }
  .work-layout { gap: 30px; }
  .service-selector { grid-template-columns: 1fr; gap: 0; }
  .selector-label, .selector-note { grid-column: auto; }
  .service-option { padding: 13px 10px; min-height: 50px; }
  .service-option-text { font-size: 12px; }
  .selector-note { padding-top: 17px; }
  .project-area-heading { gap: 10px; }
  .project-area-heading h3 { font-size: 30px; }
  .project-area-heading > div > p:last-child { font-size: 11px; }
  .project-count { font-size: 7px; padding: 7px; white-space: nowrap; }
  .project-grid { grid-template-columns: 1fr; gap: 25px; }
  .project-thumbnail { aspect-ratio: 4 / 3; }
  .project-meta h4 { font-size: 16px; }
  .placeholder-notice { font-size: 10px; }
  .dialog-media { height: 250px; }
}


/* Explore More controls for service-specific project galleries */
.project-gallery-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 32px auto 0;
}

.project-gallery-actions[hidden] {
  display: none !important;
}

.explore-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(100%, 360px);
  min-height: 50px;
  padding: 14px 20px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .015em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.explore-more-button:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.explore-more-button:focus-visible {
  outline: 3px solid var(--Orange-Yellow);
  outline-offset: 4px;
}

.explore-more-icon {
  color: var(--Orange-Yellow);
  font-size: 17px;
  line-height: 1;
}

.project-gallery-status {
  color: #858d91;
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 620px) {
  .project-gallery-actions {
    margin-top: 26px;
  }

  .explore-more-button {
    width: 100%;
    min-height: 48px;
  }
}


/* Explore links open dedicated service pages */
.explore-more-button {
  text-decoration: none;
}
.explore-more-button:focus-visible {
  outline: 3px solid var(--Orange-Yellow);
  outline-offset: 4px;
}


/* Dedicated service pages: full project galleries */
.service-work-hero {
  padding: 42px 0 54px;
  background: #fff;
}
.service-back-link {
  display: inline-block;
  margin-bottom: 36px;
  color: #737e84;
  font-size: 11px;
  font-weight: 700;
  transition: color .2s ease;
}
.service-back-link:hover { color: var(--Orange-Yellow); }
.service-work-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-top: 20px;
}
.service-work-heading h1 {
  font: 700 clamp(42px, 6vw, 76px)/1.05 var(--display);
  letter-spacing: -.065em;
  margin: 12px 0 17px;
}
.service-work-heading > div > p:last-child {
  max-width: 660px;
  color: #737e84;
  font-size: 14px;
  line-height: 1.9;
}
.service-work-intro {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: #7d878c;
  font-size: 11px;
}
.service-work-gallery { padding: 58px 0 100px; }
.service-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 22px; }
.service-project-card .project-thumbnail { aspect-ratio: 4 / 3; }
.service-project-card .project-meta h4 { font: 700 16px var(--display); letter-spacing: -.03em; }
.service-project-card .project-meta p { max-width: 90%; line-height: 1.7; }
.service-work-bottom-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 75px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.service-work-bottom-cta h2 {
  font: 700 clamp(26px, 4vw, 42px)/1.15 var(--display);
  letter-spacing: -.055em;
  margin-top: 14px;
}
.service-work-bottom-cta h2 em { color: var(--Orange-Yellow); font-style: normal; }
.service-work-bottom-cta .button { flex-shrink: 0; }
.service-work-empty { grid-column: 1 / -1; color: #788188; padding: 30px 0; }
.footer-brand .header-logo { width: 155px; max-height: 48px; }
@media (max-width: 950px) {
  .service-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .service-work-hero { padding: 28px 0 38px; }
  .service-back-link { margin-bottom: 26px; }
  .service-work-heading { align-items: flex-start; flex-direction: column; }
  .service-work-heading h1 { font-size: 42px; }
  .service-work-heading > .project-count { margin-top: 0; }
  .service-work-intro { margin-top: 20px; }
  .service-work-gallery { padding: 35px 0 65px; }
  .service-project-grid { grid-template-columns: 1fr; gap: 27px; }
  .service-work-bottom-cta { align-items: flex-start; flex-direction: column; margin-top: 52px; }
  .service-work-bottom-cta .button { width: 100%; }
}

/* ==================================
   DANGTON DESIGNS BRAND MARK EFFECTS
================================== */

/* Large, subtle logo behind the portrait */
.brandmark-watermark {
  position: absolute;
  z-index: 0;
  top: 12px;
  right: -12px;
  width: 260px;
  pointer-events: none;
  opacity: 0.13;
  animation: brandmark-breathe 7s ease-in-out infinite;
}

.brandmark-watermark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Floating brand mark badge */
.brandmark-badge {
  position: absolute;
  z-index: 4;
  top: 43%;
  left: 2px;
  width: 94px;
  height: 94px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(88, 30, 0, 0.14);
  border-radius: 24px;
  box-shadow: 0 16px 38px rgba(11, 23, 32, 0.14);

  pointer-events: none;
  animation: brandmark-float 5s ease-in-out infinite;
}

.brandmark-badge img {
  display: block;
  width: 130px;
  height: auto;
}

/* Gentle breathing animation */
@keyframes brandmark-breathe {
  0%, 100% {
    transform: scale(0.96) rotate(-3deg);
    opacity: 0.10;
  }

  50% {
    transform: scale(1.04) rotate(3deg);
    opacity: 0.18;
  }
}

/* Floating badge animation */
@keyframes brandmark-float {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}

/* Tablet and mobile adjustments */
@media (max-width: 850px) {
  .brandmark-watermark {
    width: 220px;
    right: -5px;
  }
}

@media (max-width: 620px) {
  .brandmark-watermark {
    width: 180px;
    right: 0;
    top: 12px;
  }

  .brandmark-badge {
    width: 74px;
    height: 74px;
    left: 0;
    top: 45%;
    border-radius: 19px;
  }

  .brandmark-badge img {
    width: 56px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .brandmark-watermark,
  .brandmark-badge {
    animation: none;
  }
}

/* Brand mark separators in the services ticker */
.ticker-brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
}

.ticker-brandmark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Header and footer logo */
.header-logo,
.footer-logo {
  display: block;
  width: 200px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 620px) {
  .header-logo,
  .footer-logo {
    width: 175px;
    height: 48px;
  }
}


/* =====================================
   RESPONSIVE PORTRAIT COMPOSITION
===================================== */

.portrait-frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  max-width: 390px;
  aspect-ratio: 0.78;
  margin-inline: auto;
  overflow: visible;
}

/* Orange shape */
.portrait-shape {
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  top: 12%;
  bottom: 2%;
  background: #f5a018;
  border: 1px solid #ff7b1c;
  border-radius: 48% 48% 12px 12px;
}

/* Full portrait — do not crop */
.portrait-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

/* Bottom label */
.portrait-label {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Logo inside the portrait label */
.portrait-brand img {
  display: block;
  width: 90px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Desktop */
@media (min-width: 1024px) {
  .portrait-frame {
    max-width: 390px;
  }

  .portrait-shape {
    top: 12%;
  }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 1023px) {
  .portrait-frame {
    max-width: 340px;
  }

  .portrait-shape {
    top: 13%;
    left: 9%;
    right: 9%;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .portrait-frame {
    max-width: 340px;
    width: 100%;
  }

  .portrait-shape {
    top: 14%;
    left: 9%;
    right: 9%;
  }

  .portrait-label {
    padding-inline: 10px;
  }

  .portrait-brand img {
    width: 65px;
  }
}


/* Fix Dangton Designs logo on desktop, tablet and mobile */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo {
  display: block;
  width: 185px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.footer-logo {
  display: block;
  width: 185px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 1024px) {
  .header-logo {
    width: 165px;
    height: auto;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .brand {
    flex-shrink: 0;
  }

  .header-logo {
    display: block;
    width: 155px;
    height: auto;
    max-width: none;
  }
}

#testimonial {
  scroll-margin-top: 100px;
}


.project-image {
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
}

.project-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Optional format classes */
.project-image.square {
  aspect-ratio: 1 / 1;
}

.project-image.a4-portrait {
  aspect-ratio: 210 / 297;
}

.project-image.a4-landscape {
  aspect-ratio: 297 / 210;
}

.project-image.portrait {
  aspect-ratio: 3 / 4;
}

.project-image.landscape {
  aspect-ratio: 16 / 9;
}

/* Let each portfolio thumbnail use its detected image ratio */
.project-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
}

/* Square projects */
.project-thumbnail.square {
  aspect-ratio: 1 / 1;
}

/* A4 portrait projects */
.project-thumbnail.a4-portrait {
  aspect-ratio: 210 / 297;
}

/* A4 landscape projects */
.project-thumbnail.a4-landscape {
  aspect-ratio: 297 / 210;
}

/* Other portrait and landscape projects */
.project-thumbnail.portrait {
  aspect-ratio: 3 / 4;
}

.project-thumbnail.landscape {
  aspect-ratio: 16 / 9;
}

/* Keep the artwork proportional */
.project-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


/* Dedicated service galleries: detect each thumbnail's actual image proportions. */
.service-project-card .project-thumbnail {
  aspect-ratio: 4 / 3;
}
.service-project-card .project-thumbnail.square { aspect-ratio: 1 / 1; }
.service-project-card .project-thumbnail.a4-portrait { aspect-ratio: 210 / 297; }
.service-project-card .project-thumbnail.a4-landscape { aspect-ratio: 297 / 210; }
.service-project-card .project-thumbnail.portrait { aspect-ratio: 3 / 4; }
.service-project-card .project-thumbnail.landscape { aspect-ratio: 16 / 9; }
.service-project-card .project-thumbnail > img {
  object-fit: contain;
  object-position: center;
}
.service-project-dialog .dialog-media {
  min-height: 220px;
}
.service-project-dialog .dialog-media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}
.service-project-dialog .brand-presentation[hidden],
.service-project-dialog [hidden] {
  display: none !important;
}
.service-project-dialog .pdf-button[hidden] {
  display: none !important;
}
.service-project-dialog .dialog-media {
    padding: 10px;
  }

html {
  scroll-behavior: smooth;
}


/* ========================================
   FLOATING WHATSAPP BUTTON
======================================== */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  text-decoration: none;

  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);

  /* Continuous floating movement */
  animation: whatsapp-float 2.5s ease-in-out infinite;

  /* Smooth hover transition */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

/* WhatsApp icon */
.whatsapp-float svg {
  display: block;
  width: 34px;
  height: 34px;
}

/* Floating animation */
@keyframes whatsapp-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Hover: zoom out slightly */
.whatsapp-float:hover {
  animation-play-state: paused;
  transform: scale(0.90);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  background-color: #20BD5A;
}

/* Keyboard accessibility */
.whatsapp-float:focus-visible {
  outline: 3px solid #0F3E52;
  outline-offset: 4px;
}

/* Tablet and mobile */
@media (max-width: 768px) {
  .whatsapp-float {
    right: 16px;
    bottom: 18px;
    width: 54px;
    height: 54px;
  }

  .whatsapp-float svg {
    width: 31px;
    height: 31px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    animation: none;
    transition: none;
  }
}


/* =====================================================
   DANGTON DESIGNS — UNIVERSAL PROJECT PRESENTATION
   Consistent layout for homepage and all service pages
   ===================================================== */

.project-dialog,
.service-project-dialog {
  width: min(800px, calc(100% - 28px));
  max-width: 800px;
  max-height: 90vh;
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.25);
  scrollbar-width: thin;
}

.project-dialog::backdrop,
.service-project-dialog::backdrop {
  background: rgba(6, 14, 19, 0.76);
  backdrop-filter: blur(5px);
}

/* Close button */
.project-dialog .dialog-close,
.service-project-dialog .dialog-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 12px 12px -52px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #101820;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
}

/* Presentation container */
.project-dialog .brand-presentation,
.service-project-dialog .brand-presentation {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  background: #eae8e2;
}

.project-dialog .brand-presentation[hidden],
.service-project-dialog .brand-presentation[hidden],
.project-dialog [hidden],
.service-project-dialog [hidden] {
  display: none !important;
}

/* White header with slide counter */
.project-dialog .presentation-heading,
.service-project-dialog .presentation-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 62px;
  padding: 14px 18px;
  background: #fff;
  color: #71808a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Hide BRAND PRESENTATION; retain the slide counter */
.project-dialog .presentation-heading > :first-child,
.service-project-dialog .presentation-heading > :first-child {
  display: none;
}

/* Main beige presentation area */
.project-dialog .presentation-stage,
.service-project-dialog .presentation-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 280px;
  padding: 24px 64px;
  overflow: hidden;
  background: #f0efeb;
}

/* Show the COMPLETE slide without zooming or cropping */
.project-dialog .presentation-stage img,
.service-project-dialog .presentation-stage img {
  position: relative;
  display: block;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  object-position: center;
}

/* Previous and next navigation */
.project-dialog .slide-arrow,
.service-project-dialog .slide-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: #103f52;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.project-dialog .slide-arrow:hover,
.service-project-dialog .slide-arrow:hover {
  background: #ff7b1c;
  color: #101820;
}

.project-dialog .slide-prev,
.service-project-dialog .slide-prev {
  left: 10px;
}

.project-dialog .slide-next,
.service-project-dialog .slide-next {
  right: 10px;
}

/* Bottom navigation strip and slide dots */
.project-dialog .presentation-dots,
.service-project-dialog .presentation-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 12px;
  background: #eae8e2;
}

.project-dialog .presentation-dot,
.service-project-dialog .presentation-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9cecc;
  cursor: pointer;
}

.project-dialog .presentation-dot.active,
.service-project-dialog .presentation-dot.active {
  background: #ff7b1c;
  transform: scale(1.2);
}

/* Project description below the presentation */
.project-dialog .dialog-content,
.service-project-dialog .dialog-content {
  position: relative;
  clear: both;
  padding: clamp(24px, 4vw, 38px);
  background: #fff;
}

.project-dialog .dialog-content h2,
.service-project-dialog .dialog-content h2 {
  margin: 0 0 14px;
  font: 700 clamp(25px, 3.5vw, 36px)/1.15 var(--display);
  letter-spacing: -0.045em;
}

.project-dialog .dialog-content > p:not(.dialog-kicker),
.service-project-dialog .dialog-content > p:not(.dialog-kicker) {
  max-width: 650px;
  color: #6f797f;
  font-size: 13px;
  line-height: 1.9;
}

.project-dialog .dialog-kicker,
.service-project-dialog .dialog-kicker {
  margin-bottom: 10px;
  color: var(--Orange-Yellow);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.project-dialog .dialog-contact,
.service-project-dialog .dialog-contact {
  margin-top: 24px;
}

/* Download presentation button */
.project-dialog .pdf-button,
.service-project-dialog .pdf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  margin: 16px auto 22px;
  padding: 13px 20px;
  border: 0;
  background: #f0a018;
  color: #101820;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.project-dialog .pdf-button[hidden],
.service-project-dialog .pdf-button[hidden] {
  display: none !important;
}

/* Tablet */
@media (max-width: 850px) {
  .project-dialog,
  .service-project-dialog {
    width: min(760px, calc(100% - 24px));
    max-height: 92vh;
  }

  .project-dialog .presentation-stage,
  .service-project-dialog .presentation-stage {
    min-height: 250px;
    padding: 20px 54px;
  }

  .project-dialog .presentation-stage img,
  .service-project-dialog .presentation-stage img {
    max-height: 62vh;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .project-dialog,
  .service-project-dialog {
    width: calc(100% - 20px);
    max-height: 92vh;
  }

  .project-dialog .presentation-heading,
  .service-project-dialog .presentation-heading {
    min-height: 54px;
    padding: 12px 14px;
  }

  .project-dialog .presentation-stage,
  .service-project-dialog .presentation-stage {
    min-height: 220px;
    padding: 14px 38px;
  }

  .project-dialog .presentation-stage img,
  .service-project-dialog .presentation-stage img {
    max-width: 100%;
    max-height: 55vh;
  }

  .project-dialog .slide-arrow,
  .service-project-dialog .slide-arrow {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }

  .project-dialog .slide-prev,
  .service-project-dialog .slide-prev {
    left: 4px;
  }

  .project-dialog .slide-next,
  .service-project-dialog .slide-next {
    right: 4px;
  }

  .project-dialog .presentation-dots,
  .service-project-dialog .presentation-dots {
    gap: 7px;
    min-height: 40px;
    padding: 10px;
  }

  .project-dialog .dialog-content,
  .service-project-dialog .dialog-content {
    padding: 23px 18px;
  }

  .project-dialog .dialog-contact .button,
  .service-project-dialog .dialog-contact .button,
  .project-dialog .pdf-button,
  .service-project-dialog .pdf-button {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Position the slide counter at the top-left of the presentation */
.project-dialog #slide-counter,
.service-project-dialog #slide-counter {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 10;
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  color: #71808a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  letter-spacing: 0.08em;
  pointer-events: none;
}

@media (max-width: 620px) {
  .project-dialog #slide-counter,
  .service-project-dialog #slide-counter {
    top: 12px;
    left: 14px;
    font-size: 10px;
  }
}
.services-list .service-row {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr) 30px;
  gap: 20px;
  align-items: start;
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.services-list .service-row:focus-visible {
  outline: 2px solid var(--Orange-Yellow);
  outline-offset: 5px;
}

@media (max-width: 620px) {
  .services-list .service-row {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 12px;
  }
}