:root{
  --cream:#f7f1e6;
  --paper:#fffdf9;
  --beige:#e7dccb;
  --sand:#d8c9b2;
  --ink:#0d0c0a;
  --soft-ink:#27231d;
  --muted:#6c645b;
  --line:#d9cfc1;
  --black:#050505;
  --white:#ffffff;
  --shadow:0 18px 48px rgba(13,12,10,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'DM Sans', Arial, sans-serif;
  color:var(--soft-ink);
  background:var(--cream);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
main{overflow:hidden}
.container{width:min(1240px, calc(100% - 48px)); margin:0 auto}
.utility-bar{background:var(--black); color:#ddd1c1; border-bottom:1px solid #1b1b1b}
.utility-inner{min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; text-transform:uppercase; letter-spacing:.18em}
.site-header{position:sticky; top:0; z-index:100; backdrop-filter:saturate(120%) blur(6px)}
.nav-shell{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:28px; min-height:94px; background:rgba(247,241,230,.96); border-bottom:1px solid var(--line)}
.brand-link{display:inline-flex; align-items:center; gap:16px; padding:10px 14px; border-radius:18px; transition:box-shadow .28s ease, transform .28s ease, background .28s ease}
.brand-link:hover{background:rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(180,160,130,.38), 0 0 28px rgba(214,197,166,.4); transform:translateY(-1px)}
.brand-link img{width:44px; height:68px; object-fit:contain}
.brand-wordmark strong,
.brand-wordmark span,
.footer-brand .brand-wordmark strong,
.footer-brand .brand-wordmark span{
  font-family:'Cormorant Garamond', Georgia, serif;
}
.brand-wordmark{display:flex; flex-direction:column; line-height:1}
.brand-wordmark strong{font-size:18px; font-weight:600; letter-spacing:.11em; color:var(--ink)}
.brand-wordmark span{margin-top:6px; font-size:11px; letter-spacing:.28em; color:#847867}
.brand-wordmark.light strong{color:#f6edde}
.brand-wordmark.light span{color:#b7a994}
.main-nav{display:flex; align-items:center; justify-content:center; gap:30px}
.main-nav a{position:relative; font-size:16px; color:var(--soft-ink); padding:8px 0; transition:color .24s ease}
.main-nav a::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--ink); transition:width .24s ease}
.main-nav a:hover,.main-nav a.active{color:var(--ink)}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.quote-link{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 26px; border:1px solid var(--ink); background:transparent; color:var(--ink); transition:all .26s ease; border-radius:2px}
.quote-link:hover{background:var(--ink); color:var(--paper); box-shadow:0 0 0 1px rgba(13,12,10,.05), 0 0 0 6px rgba(216,201,178,.45)}
.menu-toggle{display:none; border:0; background:none; padding:8px; cursor:pointer}
.menu-toggle span{display:block; width:24px; height:1px; background:var(--ink); margin:6px 0}
.hero{padding:72px 0}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:74px; align-items:center}
.hero-grid.narrow-gap{gap:58px}
.eyebrow{margin:0 0 18px; font-size:12px; text-transform:uppercase; letter-spacing:.2em; color:#8e7f6a; font-weight:500}
.eyebrow.light{color:#cdbfac}
h1,h2,h3{font-family:'Cormorant Garamond', Georgia, serif; color:var(--ink); margin:0}
h1{font-size:clamp(58px, 6.3vw, 96px); line-height:.93; letter-spacing:-.04em}
h2{font-size:clamp(40px, 4.7vw, 74px); line-height:.96; letter-spacing:-.035em}
h3{font-size:34px; line-height:1.02; letter-spacing:-.02em}
p{margin:0}
.lead{margin-top:22px; font-size:20px; color:var(--muted); max-width:720px}
.hero-actions{display:flex; gap:18px; align-items:center; margin-top:34px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 28px; border-radius:2px; font-size:16px; transition:all .25s ease; border:1px solid transparent; cursor:pointer}
.btn-dark{background:var(--ink); color:var(--paper)}
.btn-dark:hover{transform:translateY(-1px); box-shadow:0 16px 30px rgba(13,12,10,.14)}
.btn-light{background:var(--paper); color:var(--ink); border-color:rgba(255,255,255,.22)}
.btn-light:hover{box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 16px 30px rgba(0,0,0,.22); transform:translateY(-1px)}
.text-link{display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:500; position:relative; padding-bottom:3px}
.text-link::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform-origin:left; transition:transform .26s ease}
.text-link:hover::after{transform:scaleX(.65)}
.image-placeholder{
  min-height:320px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,253,249,.55), rgba(231,220,203,.36));
  color:#8b7f70;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:30px; font-size:13px; letter-spacing:.02em; line-height:1.7;
}
.hero-image{min-height:560px}
.section{padding:110px 0}
.alt-bg{background:var(--paper)}
.section-heading{margin-bottom:42px}
.two-col{display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:end}
.section-text{font-size:18px; color:var(--muted)}
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.value-grid article{padding:36px 28px; background:var(--paper); border:1px solid var(--line); min-height:240px; box-shadow:var(--shadow)}
.value-grid article h3{font-size:30px; margin-bottom:14px}
.showcase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.showcase-card{border:1px solid var(--line); padding:24px; min-height:100%; display:flex; flex-direction:column; gap:22px}
.dark-card{background:var(--black); color:#e9dece; border-color:#1c1c1c}
.dark-card h3{color:#fff8ee}
.dark-card p{color:#cfc3b2}
.dark-card .image-placeholder{background:#111; border-color:#2e2a25; color:#82786e}
.light-card{background:var(--paper)}
.beige-card{background:var(--beige)}
.card-image{min-height:250px}
.showcase-card h3{font-size:36px}
.feature-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:68px; align-items:center}
.feature-image{min-height:560px}
.cta-band{background:var(--black); color:#f0e7d8}
.cta-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:66px; align-items:end}
.cta-band h2{color:#fff6e9}
.cta-copy p{font-size:18px; color:#cabfae; margin-bottom:26px}
.services-page-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.service-tile{display:grid; grid-template-columns:.95fr 1.05fr; gap:0; background:var(--paper); border:1px solid var(--line); min-height:290px; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease; overflow:hidden}
.service-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#bfae93; background:#fffdf9}
.service-tile:hover .image-placeholder{background:linear-gradient(180deg, rgba(255,253,249,.85), rgba(216,201,178,.35)); color:#746758}
.service-thumb{min-height:100%; border:0; border-right:1px solid var(--line)}
.service-tile-body{padding:28px; display:flex; flex-direction:column; justify-content:space-between; gap:16px}
.service-tile h3{font-size:38px}
.service-tile p{font-size:17px; color:var(--muted)}
.tile-link{font-size:14px; text-transform:uppercase; letter-spacing:.14em; color:#8a7a66; font-weight:500}
.combo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.combo-grid article{padding:30px; border:1px solid var(--line); background:var(--cream)}
.combo-grid h3{font-size:30px; margin-bottom:10px}
.overview-grid{display:grid; grid-template-columns:.55fr 1.45fr; gap:54px; align-items:start}
.mini-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.mini-card{background:var(--cream); border:1px solid var(--line); padding:18px}
.mini-image{min-height:250px; margin-bottom:20px}
.mini-card h3{font-size:28px; margin-bottom:8px}
.detail-image{min-height:470px}
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-top:8px}
.case-card{background:var(--cream); border:1px solid var(--line); padding:18px}
.case-image{min-height:260px; margin-bottom:18px}
.case-card h3{font-size:30px; margin-bottom:10px}
.contact-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:24px}
.contact-panel{background:var(--paper); border:1px solid var(--line); padding:32px}
.quote-form{display:grid; gap:16px; margin-top:18px}
.quote-form label{display:grid; gap:8px; font-size:14px; color:var(--soft-ink)}
.quote-form input,.quote-form select,.quote-form textarea{width:100%; border:1px solid var(--line); background:var(--cream); color:var(--soft-ink); padding:14px 16px; font:inherit}
.brief-list{margin:18px 0 28px; padding-left:18px; color:var(--muted)}
.brief-list li{margin:10px 0}
.contact-info-box{padding:24px; background:var(--cream); border:1px solid var(--line)}
.contact-info-box h3{font-size:28px; margin-bottom:10px}
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:16px}
.process-grid article{padding:28px 28px 0 0; min-height:200px; border-right:1px solid var(--line)}
.process-grid article:nth-child(n+2){padding-left:28px}
.process-grid article:last-child{border-right:0}
.process-grid span{display:inline-block; margin-bottom:14px; font-size:11px; letter-spacing:.2em; color:#8e7f6a}
.process-grid h3{font-size:32px; margin-bottom:10px}
.faq-wrap{max-width:940px; margin:0 auto}
.faq-wrap details{border-top:1px solid var(--line); padding:18px 0}
.faq-wrap details:last-child{border-bottom:1px solid var(--line)}
.faq-wrap summary{list-style:none; cursor:pointer; font-family:'Cormorant Garamond', Georgia, serif; font-size:34px; color:var(--ink)}
.faq-wrap summary::-webkit-details-marker{display:none}
.faq-wrap details p{margin-top:12px; font-size:17px; color:var(--muted)}
.site-footer{background:var(--black); color:#d0c4b5; padding-top:84px; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr; gap:32px; align-items:start}
.footer-brand-link{padding:0; border-radius:0; background:none}
.footer-brand-link:hover{background:none; box-shadow:none; transform:none}
.footer-brand-link img{width:44px; height:68px}
.footer-brand p{margin-top:20px; max-width:410px; color:#ad9f8d}
.footer-col{display:grid; gap:10px}
.footer-label{margin:0 0 6px; color:#f0e7d8; text-transform:uppercase; letter-spacing:.16em; font-size:11px}
.footer-col a{transition:color .2s ease}
.footer-col a:hover{color:#fff5e8}
.footer-bottom{min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #1d1d1d; margin-top:44px; font-size:13px; color:#9f927f}
@media (max-width: 1100px){
  .nav-shell{grid-template-columns:auto auto auto; justify-content:space-between}
  .main-nav{position:fixed; inset:138px 24px auto 24px; background:var(--paper); border:1px solid var(--line); padding:24px; display:none; flex-direction:column; align-items:flex-start; box-shadow:var(--shadow)}
  .main-nav.open{display:flex}
  .menu-toggle{display:block}
  .quote-link{display:none}
  .hero-grid,.feature-grid,.two-col,.overview-grid,.cta-grid,.contact-grid{grid-template-columns:1fr; gap:36px}
  .services-page-grid,.mini-grid,.case-grid,.showcase-grid,.combo-grid,.value-grid,.process-grid{grid-template-columns:1fr}
  .process-grid article,.process-grid article:nth-child(n+2){padding:24px 0; border-right:0; border-bottom:1px solid var(--line)}
  .process-grid article:last-child{border-bottom:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-image,.feature-image,.detail-image{min-height:420px}
}
@media (max-width: 760px){
  .container{width:min(100% - 28px, 1240px)}
  .utility-inner{justify-content:center; text-align:center; min-height:54px; flex-direction:column; padding:6px 0; gap:2px}
  .nav-shell{min-height:82px; gap:12px}
  .brand-link img{width:34px; height:54px}
  .brand-wordmark strong{font-size:16px}
  h1{font-size:48px}
  h2{font-size:40px}
  .lead{font-size:18px}
  .hero{padding:46px 0}
  .section{padding:76px 0}
  .service-tile{grid-template-columns:1fr}
  .service-thumb{border-right:0; border-bottom:1px solid var(--line); min-height:230px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start; padding:18px 0}
}


/* =========================================================
   DRAFT 8 — NAVIGATION, SPACING & CONTENT REFINEMENT
========================================================= */

/* Header: subtle home-link affordance, no bubble */
.brand-link{
  position:relative;
  padding:8px 0 10px;
  border-radius:0;
  transition:opacity .22s ease, transform .22s ease;
}
.brand-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0;
  height:1px;
  background:var(--ink);
  transition:width .25s ease;
}
.brand-link:hover{
  background:transparent;
  box-shadow:none;
  transform:none;
  opacity:.82;
}
.brand-link:hover::after{width:100%;}
.brand-link:hover img{filter:drop-shadow(0 0 5px rgba(125,108,82,.22));}

/* Services is a real page link AND has a compact hover dropdown */
.services-nav{
  position:relative;
  display:flex;
  align-items:center;
}
.services-nav > a{
  position:relative;
}
.services-dropdown{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translate(-50%,8px);
  width:248px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 18px 42px rgba(13,12,10,.10);
  padding:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:140;
}
.services-dropdown::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-16px;
  height:16px;
}
.services-dropdown a{
  display:block;
  padding:11px 12px;
  font-size:14px;
  color:var(--soft-ink);
  border-bottom:1px solid rgba(217,207,193,.65);
  transition:background .2s ease, padding-left .2s ease;
}
.services-dropdown a:last-child{border-bottom:0;}
.services-dropdown a::after{display:none;}
.services-dropdown a:hover{
  background:var(--cream);
  padding-left:16px;
}
.services-nav:hover .services-dropdown,
.services-nav:focus-within .services-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

/* Top quote: obvious but restrained hover */
.quote-link{
  background:transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.quote-link:hover{
  background:var(--beige);
  color:var(--ink);
  border-color:#bea98d;
  box-shadow:0 0 0 3px rgba(216,201,178,.28);
}

/* Black CTA buttons use cream/beige rather than pure white */
.btn-light{
  background:var(--beige);
  color:var(--ink);
  border-color:#d7c8b3;
}
.btn-light:hover{
  background:var(--cream);
  color:var(--ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.22);
}

/* More editorial breathing room for text-heavy blocks */
.editorial-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.editorial-copy h2{
  max-width:760px;
  font-size:clamp(42px,4.25vw,66px);
  line-height:1.02;
  margin:0;
}
.editorial-copy .section-text{
  max-width:680px;
  line-height:1.9;
}
.editorial-rule{
  width:100%;
  height:1px;
  background:var(--line);
  margin:30px 0;
}
.feature-copy .text-link{
  margin-top:30px;
}
.feature-grid{
  gap:86px;
}
.feature-project{
  padding-top:128px;
  padding-bottom:128px;
}
.overview-section{
  padding-top:126px;
  padding-bottom:126px;
}
.overview-copy h2{
  max-width:920px;
}
.overview-copy .editorial-rule{
  margin:38px 0 34px;
}
.overview-copy .section-text{
  max-width:820px;
  font-size:19px;
}

/* Services page: deliberate 3 + 2 layout; no dead corner */
.services-page-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.service-tile{
  grid-template-columns:1fr;
  min-height:0;
}
.service-tile.tile-1,
.service-tile.tile-2,
.service-tile.tile-3{
  grid-column:span 2;
}
.service-tile.tile-4,
.service-tile.tile-5{
  grid-column:span 3;
}
.service-thumb{
  min-height:240px;
  border-right:0;
  border-bottom:1px solid var(--line);
}
.service-tile-body{
  min-height:250px;
  padding:28px 30px 30px;
}
.service-tile h3{font-size:35px;}
.service-tile:hover{
  transform:translateY(-4px);
  background:#fffaf1;
  border-color:#bba78a;
  box-shadow:0 20px 44px rgba(13,12,10,.10);
}
.service-tile:hover .tile-link{
  color:var(--ink);
  letter-spacing:.18em;
}

/* Footer brand should not inherit the header underline hover */
.footer-brand-link::after{display:none;}
.footer-brand-link:hover{opacity:1;}
.footer-brand-link:hover img{filter:none;}

/* Mobile navigation: show service sublinks directly beneath Services */
@media(max-width:1100px){
  .services-nav{
    width:100%;
    display:block;
  }
  .services-dropdown{
    position:static;
    transform:none;
    width:100%;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    box-shadow:none;
    border:0;
    border-left:1px solid var(--line);
    background:transparent;
    margin:8px 0 0 6px;
    padding:0 0 0 14px;
  }
  .services-dropdown::before{display:none;}
  .services-dropdown a{
    border:0;
    padding:7px 0;
    color:var(--muted);
    font-size:14px;
  }
  .services-dropdown a:hover{
    background:transparent;
    padding-left:6px;
    color:var(--ink);
  }
  .services-page-grid{
    grid-template-columns:1fr 1fr;
  }
  .service-tile.tile-1,
  .service-tile.tile-2,
  .service-tile.tile-3,
  .service-tile.tile-4,
  .service-tile.tile-5{
    grid-column:span 1;
  }
}
@media(max-width:760px){
  .services-page-grid{grid-template-columns:1fr;}
  .editorial-rule{margin:24px 0;}
  .feature-grid{gap:46px;}
}


/* =========================================================
   DRAFT 10 — FOOTER GRID ALIGNMENT
========================================================= */

.footer-grid{
  align-items:start;
}

.footer-brand{
  align-self:start;
}

.footer-brand-link{
  padding:0 !important;
  margin:0;
  min-height:0;
  align-items:flex-start;
  line-height:1;
}

.footer-brand-link img{
  width:44px;
  height:58px;
  margin:0;
  object-fit:contain;
  object-position:top center;
}

.footer-brand-link .brand-wordmark{
  margin:0;
  padding:0;
  justify-content:flex-start;
}

.footer-brand-link .brand-wordmark strong{
  margin:0;
  line-height:.92;
}

.footer-brand-link .brand-wordmark span{
  margin-top:7px;
}

.footer-col{
  align-self:start;
}

.footer-label{
  margin-top:0;
  line-height:1;
}

/* Maintain equal top alignment even when footer columns wrap responsively */
@media(max-width:1100px){
  .footer-brand,
  .footer-col{
    align-self:start;
  }
}


/* =========================================================
   DRAFT 11 — IMAGE IMPLEMENTATION & HOVER REFINEMENT
========================================================= */

/* Replace the old underline hover on the brand with a subtle wordmark refinement */
.brand-link::after{
  display:none !important;
}
.brand-link{
  opacity:1;
}
.brand-link:hover{
  opacity:1;
}
.brand-link .brand-wordmark span{
  transition:color .22s ease, letter-spacing .22s ease;
}
.brand-link:hover .brand-wordmark span{
  color:#5d5042;
  letter-spacing:.30em;
}
.brand-link:hover img{
  filter:drop-shadow(0 0 5px rgba(125,108,82,.16));
}

/* Image treatment */
.image-frame{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:#efe6d9;
}
.image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-image.image-frame{
  min-height:560px;
}
.hero-image.image-frame img{
  object-position:center center;
}
.card-image.image-frame{
  min-height:250px;
}
.feature-image.image-frame{
  min-height:560px;
}
.feature-image.image-frame img{
  object-position:center center;
}

/* Subtle visual polish for card image blocks */
.showcase-card .image-frame{
  transition:transform .28s ease, box-shadow .28s ease;
}
.showcase-card:hover .image-frame{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(13,12,10,.10);
}

/* Responsive image heights */
@media (max-width:1100px){
  .hero-image.image-frame,
  .feature-image.image-frame{
    min-height:420px;
  }
}
@media (max-width:760px){
  .card-image.image-frame{
    min-height:220px;
  }
  .hero-image.image-frame,
  .feature-image.image-frame{
    min-height:320px;
  }
}


/* =========================================================
   DRAFT 12 — HOMEPAGE IMAGE / BALANCE REFINEMENTS
========================================================= */

/* Make the homepage hero image fill the media area cleanly */
.home-hero .hero-grid{
  align-items:stretch;
}
.home-hero .hero-media,
.feature-project .feature-media{
  display:flex;
}
.home-hero .hero-image.image-frame,
.feature-project .feature-image.image-frame{
  width:100%;
  height:100%;
}
.home-hero .hero-image.image-frame img,
.feature-project .feature-image.image-frame img{
  width:100%;
  height:100%;
}

/* Better balance in the Why Al Khatib section */
.balanced-heading{
  align-items:stretch;
}
.heading-side-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding-top:8px;
}
.side-panel-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:0 0 18px;
  border-bottom:1px solid var(--line);
}
.side-panel-points span{
  font-size:12px;
  line-height:1.45;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8e7f6a;
}
.heading-side-panel .section-text{
  max-width:100%;
}

/* Remove image pop effect on showcase cards; keep them calm and refined */
.showcase-card{
  transition:border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.showcase-card .image-frame{
  transition:none;
}
.showcase-card:hover .image-frame{
  transform:none;
  box-shadow:none;
}
.showcase-card:hover{
  box-shadow:none;
  border-color:#c8baa7;
}

/* Ensure the homepage feature image crops attractively */
.feature-project .feature-image.image-frame img{
  object-position:center center;
}

@media (max-width:1100px){
  .heading-side-panel{
    padding-top:0;
  }
  .side-panel-points{
    grid-template-columns:1fr;
    gap:10px;
  }
}

@media (max-width:760px){
  .home-hero .hero-image.image-frame{
    min-height:280px;
  }
}


/* =========================================================
   DRAFT 13 — HERO / BRAND / VALUE SECTION REFINEMENTS
========================================================= */

/* Header brand hover: extend the subtle refinement to the logo and full name */
.nav-shell > .brand-link img,
.nav-shell > .brand-link .brand-wordmark strong,
.nav-shell > .brand-link .brand-wordmark span{
  transition:filter .22s ease, color .22s ease, letter-spacing .22s ease, opacity .22s ease;
}
.nav-shell > .brand-link:hover img{
  filter:brightness(.88) drop-shadow(0 0 4px rgba(125,108,82,.14));
}
.nav-shell > .brand-link:hover .brand-wordmark strong{
  color:#000000;
}
.nav-shell > .brand-link:hover .brand-wordmark span{
  color:#5d5042;
  letter-spacing:.30em;
}

/* Home hero: remove the empty area under the image and show the image more cleanly */
.home-hero .hero-grid{
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  align-items:start;
  gap:72px;
}
.home-hero .hero-copy{
  padding-top:16px;
}
.home-hero .hero-media{
  display:block;
  align-self:start;
}
.home-hero .hero-image.image-frame{
  aspect-ratio:4 / 3;
  min-height:0;
  height:auto;
  background:var(--paper);
}
.home-hero .hero-image.image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Why Al Khatib: rebalance the composition and remove the awkward empty area */
.value-section .two-col{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  align-items:start;
  gap:56px;
}
.value-section .heading-side-panel{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:24px;
  padding:32px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  min-height:100%;
}
.value-section .heading-side-panel .section-text{
  order:1;
  max-width:100%;
  font-size:18px;
  line-height:1.85;
}
.value-section .side-panel-points{
  order:2;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:20px 0 0;
  border-top:1px solid var(--line);
  border-bottom:0;
}
.value-section .side-panel-points span{
  display:block;
  font-size:12px;
  letter-spacing:.18em;
}
.value-section .value-grid{
  margin-top:8px;
}

/* Keep the commercial environment cards calm on hover */
.showcase-card,
.showcase-card:hover{
  transform:none;
  box-shadow:none;
}

/* Featured project image: use the new project image and display it more confidently */
.feature-project .feature-grid{
  align-items:start;
  gap:64px;
}
.feature-project .feature-copy{
  padding-top:18px;
}
.feature-project .feature-image.image-frame{
  aspect-ratio:4 / 5;
  min-height:0;
  height:auto;
  background:#ece1d4;
}
.feature-project .feature-image.image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

@media (max-width:1100px){
  .home-hero .hero-grid,
  .value-section .two-col,
  .feature-project .feature-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .home-hero .hero-copy,
  .feature-project .feature-copy{
    padding-top:0;
  }
  .value-section .heading-side-panel{
    padding:26px;
  }
}

@media (max-width:760px){
  .home-hero .hero-image.image-frame{
    aspect-ratio:5 / 4;
  }
  .feature-project .feature-image.image-frame{
    aspect-ratio:4 / 5;
  }
}


/* =========================================================
   DRAFT 14 — PREFERRED WHY LAYOUT / BRAND HOVER / SERVICE IMAGES
========================================================= */

/* Entire header brand lockup gently lifts together */
.nav-shell > .brand-link{
  transition:transform .22s ease, opacity .22s ease;
  will-change:transform;
}
.nav-shell > .brand-link:hover{
  transform:translateY(-3px);
  opacity:1;
}
.nav-shell > .brand-link img,
.nav-shell > .brand-link .brand-wordmark strong,
.nav-shell > .brand-link .brand-wordmark span{
  transition:filter .22s ease, color .22s ease, opacity .22s ease;
}
.nav-shell > .brand-link:hover img{
  filter:brightness(.84) drop-shadow(0 3px 5px rgba(13,12,10,.12));
}
.nav-shell > .brand-link:hover .brand-wordmark strong{
  color:#000;
}
.nav-shell > .brand-link:hover .brand-wordmark span{
  color:#514538;
}

/* Restore the earlier Why Al Khatib composition */
.value-section .why-editorial{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:start;
  gap:56px;
}
.value-section .why-side{
  display:flex;
  flex-direction:column;
  gap:38px;
  padding-top:8px;
}
.value-section .why-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.value-section .why-points span{
  font-size:11px;
  line-height:1.45;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8e7f6a;
}
.value-section .why-side .section-text{
  max-width:610px;
  font-size:18px;
  line-height:1.8;
}
.value-section .heading-side-panel{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}

/* Real service imagery */
.service-photo{
  overflow:hidden;
  background:#ece3d6;
  min-height:240px;
  border-bottom:1px solid var(--line);
}
.service-photo img{
  width:100%;
  height:100%;
  min-height:240px;
  object-fit:cover;
  object-position:center;
  display:block;
}
.service-tile:hover .service-photo img{
  transform:none;
}

@media(max-width:1100px){
  .value-section .why-editorial{
    grid-template-columns:1fr;
    gap:34px;
  }
  .value-section .why-side{
    gap:24px;
    padding-top:0;
  }
  .value-section .why-points{
    grid-template-columns:1fr;
    gap:8px;
  }
}


/* =========================================================
   DRAFT 16 — STATIC SERVICE CARDS / SIXTH CAPABILITY PAGE
========================================================= */

/* Remove the pop/lift interaction from service cards */
.service-tile,
.service-tile:hover{
  transform:none !important;
}
.service-tile:hover{
  box-shadow:none !important;
}
.service-tile:hover .service-photo img,
.service-tile:hover .service-thumb,
.service-tile:hover .service-tile-body{
  transform:none !important;
}
.service-tile{
  transition:border-color .22s ease, background .22s ease;
}
.service-tile:hover{
  border-color:#bfae93;
  background:#fffaf1;
}

/* Six cards create a balanced 3 x 2 layout */
.services-page-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.service-tile.tile-1,
.service-tile.tile-2,
.service-tile.tile-3,
.service-tile.tile-4,
.service-tile.tile-5,
.service-tile.tile-6{
  grid-column:span 2;
}

/* Sixth card: intentionally conceptual, not presented as an active service */
.future-service-visual{
  min-height:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  background:var(--black);
  color:var(--cream);
  border-bottom:1px solid #222;
}
.future-mark{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:84px;
  line-height:.75;
}
.future-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#c8baa7;
}
.future-service-tile:hover .future-service-visual{
  background:var(--black);
}

/* Dedicated upcoming-capabilities page */
.future-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:72px;
  align-items:stretch;
}
.future-hero-copy{
  padding:34px 0;
}
.future-hero-panel{
  min-height:520px;
  background:var(--black);
  color:#d5c8b5;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.future-page-plus{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:140px;
  line-height:.7;
  color:var(--cream);
}
.future-hero-panel p{
  max-width:440px;
  font-size:20px;
  line-height:1.75;
}
.future-principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.future-principles article{
  padding:34px 30px 10px 0;
  border-right:1px solid var(--line);
}
.future-principles article:nth-child(n+2){
  padding-left:30px;
}
.future-principles article:last-child{
  border-right:0;
}
.future-principles span{
  display:block;
  margin-bottom:24px;
  font-size:11px;
  letter-spacing:.18em;
  color:#8e7f6a;
}
.future-principles h3{
  font-size:32px;
  margin-bottom:12px;
}
.future-principles p{
  color:var(--muted);
}

@media(max-width:1100px){
  .service-tile.tile-1,
  .service-tile.tile-2,
  .service-tile.tile-3,
  .service-tile.tile-4,
  .service-tile.tile-5,
  .service-tile.tile-6{
    grid-column:span 3;
  }
  .future-hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .future-hero-panel{
    min-height:360px;
  }
  .future-principles{
    grid-template-columns:1fr;
  }
  .future-principles article,
  .future-principles article:nth-child(n+2){
    padding:26px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .future-principles article:last-child{
    border-bottom:0;
  }
}
@media(max-width:760px){
  .service-tile.tile-1,
  .service-tile.tile-2,
  .service-tile.tile-3,
  .service-tile.tile-4,
  .service-tile.tile-5,
  .service-tile.tile-6{
    grid-column:span 6;
  }
}


/* =========================================================
   DRAFT 17 — HOMEPAGE HERO IMAGE VERTICAL POSITION
========================================================= */

/* Lower the hero image slightly to introduce deliberate cream space above it */
.home-hero .hero-media{
  margin-top:34px;
}

/* Keep mobile/tablet composition compact */
@media(max-width:1100px){
  .home-hero .hero-media{
    margin-top:8px;
  }
}
@media(max-width:760px){
  .home-hero .hero-media{
    margin-top:0;
  }
}


/* =========================================================
   DRAFT 18 — SERVICES HERO IMAGE
========================================================= */

.services-hero-image{
  min-height:560px;
  height:560px;
}
.services-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}

@media(max-width:1100px){
  .services-hero-image{
    min-height:420px;
    height:420px;
  }
}
@media(max-width:760px){
  .services-hero-image{
    min-height:340px;
    height:340px;
  }
}


/* =========================================================
   DRAFT 19 — SECTION RULES / WHY SECTION / SERVICE CARD ALIGNMENT
========================================================= */

/* Add subtle divider rules between key sections for a more editorial rhythm */
.with-divider .container,
.with-section-rule{
  border-top:1px solid var(--line);
  padding-top:36px;
}

/* Refine the Why Al Khatib block after removing the micro-label row */
.value-section .why-editorial{
  align-items:start;
}
.value-section .why-side{
  padding-top:0;
  gap:0;
}
.value-section .why-side .section-text{
  max-width:100%;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.value-section .why-points{
  display:none;
}

/* Consistent service-card proportions */
.services-page-grid{
  align-items:stretch;
}
.service-tile{
  display:flex;
  flex-direction:column;
  min-height:100%;
  overflow:hidden;
}
.service-thumb,
.service-photo,
.future-service-visual{
  width:100%;
  height:270px;
  min-height:270px;
  border-right:0;
  border-bottom:1px solid var(--line);
}
.service-photo img,
.future-service-visual img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center;
  display:block;
}
.service-tile-body{
  flex:1;
  min-height:300px;
  padding:30px 34px 32px;
}
.service-tile h3{
  margin:0 0 12px;
}
.service-tile p{
  margin:0;
}
.service-tile .tile-link{
  margin-top:auto;
  display:inline-block;
  padding-top:10px;
}

/* Keep the upcoming-capabilities card photographic, not symbolic */
.future-service-visual{
  background:#e8dfd2;
}
.future-mark,
.future-kicker{
  display:none;
}

/* Services hero still uses a generous vertical frame but aligns cleanly */
.services-page-hero .hero-grid{
  align-items:start;
}
.services-hero-image{
  min-height:560px;
  height:560px;
}
.services-hero-image img{
  object-position:center center;
}

@media(max-width:1100px){
  .service-thumb,
  .service-photo,
  .future-service-visual{
    height:240px;
    min-height:240px;
  }
  .service-tile-body{
    min-height:260px;
    padding:28px;
  }
}

@media(max-width:760px){
  .with-divider .container,
  .with-section-rule{
    padding-top:26px;
  }
  .service-thumb,
  .service-photo,
  .future-service-visual{
    height:220px;
    min-height:220px;
  }
  .service-tile-body{
    min-height:0;
    padding:24px;
  }
}


/* =========================================================
   DRAFT 20 — DIVIDER CLEANUP / DIGITAL PRINTING HERO
========================================================= */

/* Why Al Khatib: keep the single section-level divider only */
.value-section .why-side .section-text{
  padding-top:0;
  border-top:0;
}

/* Featured Project: no internal divider rules */
.feature-project .editorial-rule{
  display:none;
}
.feature-project .feature-copy h2{
  margin-top:24px;
}
.feature-project .feature-copy .section-text{
  margin-top:34px;
}

/* Digital Printing hero image */
.digital-printing-hero-image{
  min-height:560px;
  height:560px;
}
.digital-printing-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Give the Service Overview heading and paragraph clear separation */
.overview-section .overview-grid > div > .section-text{
  margin-top:38px;
}

@media(max-width:1100px){
  .digital-printing-hero-image{
    min-height:430px;
    height:430px;
  }
  .overview-section .overview-grid > div > .section-text{
    margin-top:28px;
  }
}
@media(max-width:760px){
  .digital-printing-hero-image{
    min-height:340px;
    height:340px;
  }
}


/* =========================================================
   DRAFT 21 — WHY SECTION OFFSET / DIGITAL PRINTING IMAGERY
========================================================= */

/* Lower the right-hand Why Al Khatib paragraph so it aligns more naturally with the heading block */
.value-section .why-side{
  padding-top:28px;
}

/* Real imagery for the digital printing applications page */
.mini-card .mini-image.service-photo{
  min-height:210px;
  height:210px;
}
.mini-card .mini-image.service-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.detail-image.image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media(max-width:1100px){
  .value-section .why-side{
    padding-top:12px;
  }
}

@media(max-width:760px){
  .value-section .why-side{
    padding-top:0;
  }
  .mini-card .mini-image.service-photo{
    min-height:190px;
    height:190px;
  }
}


/* =========================================================
   DRAFT 22 — FULL IMAGE COMPOSITIONS / DIGITAL PRINTING DIVIDER
========================================================= */

/* Lower and lighten the supporting copy in the Why Al Khatib composition */
.value-section .why-side{
  padding-top:54px;
}
.value-section .why-side .section-text{
  max-width:590px;
  line-height:1.75;
}

/* One clean divider between the Digital Printing hero and Service Overview */
.digital-printing-overview-section .container{
  border-top:1px solid var(--line);
  padding-top:68px;
}

/* Hero: use the source image's real 3:2 proportion so the full composition is visible */
.digital-printing-hero-image{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:3 / 2;
}
.digital-printing-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Application cards: let each supplied photograph keep its natural aspect ratio.
   This avoids cutting away half the image and removes artificial empty frame space. */
.digital-printing-applications .mini-grid{
  align-items:start;
}
.digital-printing-applications .mini-card{
  align-self:start;
}
.digital-printing-applications .mini-card .mini-image.service-photo{
  width:100%;
  height:auto;
  min-height:0;
  margin-bottom:20px;
  overflow:hidden;
  border-bottom:0;
}
.digital-printing-applications .mini-card .mini-image.service-photo img{
  width:100%;
  height:auto;
  min-height:0;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* Production detail: match the frame to the photograph instead of leaving a cream void */
.digital-printing-detail-image{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:3 / 2;
}
.digital-printing-detail-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media(max-width:1100px){
  .value-section .why-side{
    padding-top:30px;
  }
  .digital-printing-overview-section .container{
    padding-top:50px;
  }
}

@media(max-width:760px){
  .value-section .why-side{
    padding-top:10px;
  }
  .digital-printing-overview-section .container{
    padding-top:34px;
  }
}


/* =========================================================
   DRAFT 23 — DIGITAL PRINTING IMAGE PROPORTION REFINEMENT
========================================================= */

/* Refine the visual rhythm of the Digital Printing page so every image feels balanced.
   The goal is to keep the imagery clean and editorial without awkward cropping or distortion. */

.digital-printing-hero-image.dp-balanced-hero{
  aspect-ratio: 16 / 11;
  min-height: 0;
  height: auto;
}
.digital-printing-hero-image.dp-balanced-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.digital-printing-applications .mini-grid{
  gap: 28px;
  align-items: start;
}
.digital-printing-applications .mini-card{
  display: flex;
  flex-direction: column;
}
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media{
  width: 100%;
  min-height: 0;
  margin-bottom: 18px;
  overflow: hidden;
  background: #ece3d6;
  border: 1px solid var(--line);
  padding: 14px;
  box-sizing: border-box;
}
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media img{
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* Use two calibrated media heights rather than forcing the original image proportions. */
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-portrait{
  height: 350px;
}
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-landscape{
  height: 280px;
}

/* Small image-position refinements per subject. */
.window-graphics-card .mini-image.service-photo img{
  object-position: center 50%;
}
.wall-graphics-card .mini-image.service-photo img{
  object-position: center 48%;
}
.vehicle-branding-card .mini-image.service-photo img{
  object-position: center 53%;
}
.display-printing-card .mini-image.service-photo img{
  object-position: center 44%;
}

.digital-printing-detail-image.dp-balanced-detail{
  aspect-ratio: 16 / 10;
  min-height: 0;
  height: auto;
}
.digital-printing-detail-image.dp-balanced-detail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 1100px){
  .digital-printing-hero-image.dp-balanced-hero{
    aspect-ratio: 4 / 3;
  }
  .digital-printing-applications .mini-card .mini-image.service-photo.dp-media-portrait{
    height: 320px;
  }
  .digital-printing-applications .mini-card .mini-image.service-photo.dp-media-landscape{
    height: 250px;
  }
}

@media (max-width: 760px){
  .digital-printing-hero-image.dp-balanced-hero,
  .digital-printing-detail-image.dp-balanced-detail{
    aspect-ratio: 4 / 3;
  }
  .digital-printing-applications .mini-grid{
    gap: 22px;
  }
  .digital-printing-applications .mini-card .mini-image.service-photo.dp-media{
    padding: 12px;
  }
  .digital-printing-applications .mini-card .mini-image.service-photo.dp-media-portrait{
    height: 290px;
  }
  .digital-printing-applications .mini-card .mini-image.service-photo.dp-media-landscape{
    height: 220px;
  }
}

/* =========================================================
   DRAFT 24 — DIGITAL PRINTING APPLICATION CARD REDESIGN
========================================================= */

/* Redesign the application cards so each image uses the full available width
   without being cropped or sitting inside an oversized framed box.
   The cards keep a clean editorial look while allowing portrait and landscape
   images to keep their own proportions naturally. */

.digital-printing-applications .mini-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
  align-items:start;
}

.digital-printing-applications .mini-card{
  display:flex;
  flex-direction:column;
  align-self:start;
  padding:14px;
  background:#fbf8f2;
  border:1px solid var(--line);
}

.digital-printing-applications .mini-card .mini-image.service-photo.dp-media,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-portrait,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-landscape{
  width:100%;
  height:auto;
  min-height:0;
  margin:0 0 18px;
  padding:0;
  border:1px solid var(--line);
  background:#efe6d9;
  overflow:hidden;
}

.digital-printing-applications .mini-card .mini-image.service-photo.dp-media img{
  width:100%;
  height:auto;
  min-height:0;
  display:block;
  object-fit:unset;
  object-position:center center;
}

.digital-printing-applications .mini-card h3{
  margin:0 0 8px;
}

.digital-printing-applications .mini-card p{
  margin:0;
}

@media (max-width: 760px){
  .digital-printing-applications .mini-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .digital-printing-applications .mini-card{
    padding:12px;
  }
}

/* =========================================================
   DRAFT 25 — DIGITAL PRINTING APPLICATIONS, 75% ZOOM SAFE
========================================================= */

/* Rebuild the application card layout so it still reads cleanly on desktop
   at ~75% browser zoom or higher. The cards now keep an editorial width,
   the images fill their frames properly, and each frame uses a ratio that
   matches the source photo orientation to avoid distortion and awkward empty space. */

.digital-printing-applications .container{
  max-width:1120px;
}

.digital-printing-applications .mini-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(320px, 460px)) !important;
  justify-content:center !important;
  gap:30px !important;
  align-items:start !important;
  margin:0 auto;
}

.digital-printing-applications .mini-card{
  display:flex !important;
  flex-direction:column !important;
  align-self:start !important;
  padding:14px !important;
  background:#fbf8f2;
  border:1px solid var(--line);
}

.digital-printing-applications .mini-card .mini-image.service-photo,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-portrait,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-landscape{
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border:1px solid var(--line) !important;
  background:#efe7da;
  overflow:hidden;
  display:block !important;
  box-sizing:border-box;
}

/* Match the frame to the supplied artwork instead of forcing every image into
   one generic box. This keeps the photographs full, proportional and legible. */
.window-graphics-card .mini-image.service-photo,
.wall-graphics-card .mini-image.service-photo,
.display-printing-card .mini-image.service-photo{
  aspect-ratio:2 / 3;
}

.vehicle-branding-card .mini-image.service-photo{
  aspect-ratio:3 / 2;
}

.digital-printing-applications .mini-card .mini-image.service-photo img,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media img,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-portrait img,
.digital-printing-applications .mini-card .mini-image.service-photo.dp-media-landscape img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.digital-printing-applications .mini-card h3{
  margin:0 0 8px;
}

.digital-printing-applications .mini-card p{
  margin:0;
}

@media (max-width: 1100px){
  .digital-printing-applications .mini-grid{
    grid-template-columns:repeat(2, minmax(280px, 1fr)) !important;
    gap:24px !important;
  }
}

@media (max-width: 760px){
  .digital-printing-applications .mini-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .digital-printing-applications .mini-card{
    padding:12px !important;
  }
}


/* =========================================================
   DRAFT 26 — DIGITAL PRINTING APPLICATIONS, UNIFIED ART DIRECTION
========================================================= */

/* The source photographs have mixed portrait and landscape orientations.
   Each application card now uses the same landscape media stage. The full
   photograph remains visible on top, while a soft crop of that same photo fills
   the surrounding frame. This keeps the layout balanced at desktop zoom levels
   such as 75% without stretching the images or leaving hard empty bars. */

.digital-printing-applications .container{
  max-width:1180px;
}

.digital-printing-applications .mini-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:28px !important;
  align-items:stretch !important;
  margin:0 auto;
}

.digital-printing-applications .mini-card{
  display:flex !important;
  flex-direction:column !important;
  height:100%;
  min-width:0;
  padding:16px !important;
  background:#fbf8f2;
  border:1px solid var(--line);
}

.digital-printing-applications .mini-card .dp-stage{
  position:relative;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:4 / 3;
  margin:0 0 20px !important;
  padding:0 !important;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--line) !important;
  background:#e9e0d4;
}

.digital-printing-applications .mini-card .dp-stage::before{
  content:"";
  position:absolute;
  inset:-7%;
  z-index:-2;
  background-image:linear-gradient(rgba(247,241,230,.22),rgba(247,241,230,.22)),var(--dp-bg);
  background-size:cover;
  background-position:center;
  filter:blur(15px) saturate(.78);
  transform:scale(1.08);
}

.digital-printing-applications .mini-card .dp-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(245,239,230,.10);
}

.digital-printing-applications .mini-card .dp-stage img{
  position:relative;
  z-index:1;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:10px;
  box-sizing:border-box;
}

.vehicle-branding-card .dp-stage img{
  padding:0;
}

.digital-printing-applications .mini-card h3{
  margin:0 0 8px;
}
.digital-printing-applications .mini-card p{
  margin:0;
}

@media (min-width:1500px){
  .digital-printing-applications .mini-grid{
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:900px){
  .digital-printing-applications .mini-grid{
    grid-template-columns:1fr !important;
    max-width:640px;
  }
}

@media (max-width:600px){
  .digital-printing-applications .mini-card{
    padding:12px !important;
  }
  .digital-printing-applications .mini-card .dp-stage{
    aspect-ratio:1 / 1;
    margin-bottom:16px !important;
  }
}


/* =========================================================
   DRAFT 28 — ACRYLIC FABRICATION IMAGE SYSTEM
========================================================= */

.acrylic-hero-image{
  width:100%;
  min-height:0;
  height:auto;
  aspect-ratio:5 / 6;
  overflow:hidden;
}
.acrylic-hero-image img{
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* All four application cards use the same 4:3 artwork frame.
   Their source files are pre-cropped to 4:3, so no image is stretched and the
   grid remains symmetrical at normal desktop zoom, including 75%+. */
.acrylic-applications .mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.acrylic-applications .mini-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.acrylic-applications .acrylic-card-image{
  width:100%;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:4 / 3;
  margin-bottom:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#eee6da;
}
.acrylic-applications .acrylic-card-image img{
  width:100%;
  height:100%;
  min-height:0 !important;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media(max-width:1100px){
  .acrylic-hero-image{aspect-ratio:4 / 5;}
}
@media(max-width:760px){
  .acrylic-applications .mini-grid{grid-template-columns:1fr;}
  .acrylic-hero-image{aspect-ratio:4 / 5;}
}


/* =========================================================
   DRAFT 29 — ACRYLIC RETAIL / DETAIL IMAGE UPDATE
========================================================= */

/* The project-considerations image uses its native landscape composition so it
   fills the media column cleanly without stretching or an oversized blank frame. */
.acrylic-detail-image{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:3 / 2;
  overflow:hidden;
}
.acrylic-detail-image img{
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media(max-width:760px){
  .acrylic-detail-image{
    aspect-ratio:4 / 3;
  }
}


/* =========================================================
   DRAFT 30 — ZOOM-STABLE TYPOGRAPHY & RETAIL COMPONENT IMAGE
========================================================= */

/*
  Prevent headings from visually "mashing" together at different browser
  zoom levels. Earlier typography relied on very tight negative tracking and
  viewport-heavy sizing, which can produce inconsistent wrapping when the
  effective viewport changes at 75%, 90%, 110%, etc.
*/

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-kerning:normal;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}

/* Let grid children genuinely shrink instead of forcing text outside columns. */
.hero-grid > *,
.feature-grid > *,
.two-col > *,
.overview-grid > *,
.cta-grid > *,
.contact-grid > *{
  min-width:0;
}

/* More forgiving display typography:
   - less aggressive negative tracking
   - explicit word spacing
   - slightly more line height
   - a capped size so zooming out does not make headings disproportionately huge
*/
h1,
h2,
h3{
  font-kerning:normal;
  font-feature-settings:"kern" 1, "liga" 1;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

h1{
  font-size:clamp(58px, 5.35vw, 88px) !important;
  line-height:.99 !important;
  letter-spacing:-.022em !important;
  word-spacing:.035em;
}

h2{
  font-size:clamp(40px, 4.05vw, 68px) !important;
  line-height:1.01 !important;
  letter-spacing:-.018em !important;
  word-spacing:.03em;
}

h3{
  line-height:1.08 !important;
  letter-spacing:-.012em !important;
  word-spacing:.025em;
}

/* Keep long service headings inside their columns cleanly. */
.hero-copy h1,
.feature-copy h2,
.overview-grid h2,
.section-heading h2,
.cta-band h2{
  max-width:100%;
}

/* Paragraph copy should keep normal word spacing regardless of zoom. */
.lead,
.section-text,
.mini-card p,
.service-tile p,
.showcase-card p,
.cta-copy p{
  letter-spacing:0;
  word-spacing:normal;
}

/* Preserve the intended spaced-out label styling separately. */
.eyebrow,
.tile-link,
.footer-label,
.utility-inner{
  word-spacing:normal;
}

@media (max-width:1300px){
  h1{
    font-size:clamp(56px, 5vw, 80px) !important;
  }
  h2{
    font-size:clamp(40px, 3.9vw, 62px) !important;
  }
}

@media (max-width:1100px){
  h1{
    font-size:64px !important;
    line-height:1 !important;
  }
  h2{
    font-size:52px !important;
    line-height:1.02 !important;
  }
}

@media (max-width:760px){
  h1{
    font-size:46px !important;
    line-height:1.02 !important;
    letter-spacing:-.016em !important;
    word-spacing:.025em;
  }
  h2{
    font-size:38px !important;
    line-height:1.04 !important;
    letter-spacing:-.012em !important;
  }
  h3{
    line-height:1.1 !important;
  }
}


/* =========================================================
   DRAFT 31 — SIGNAGE IMAGES + STABLE TYPOGRAPHY OVERRIDES
========================================================= */

/* Keep heading rhythm consistent across common browser zoom levels.
   Fixed rem sizing with restrained tracking is more stable than vw-heavy sizing.
*/
body{
  font-optical-sizing:auto;
}

h1,
h2,
h3{
  font-kerning:normal;
  font-feature-settings:"kern" 1, "liga" 1;
  font-variant-ligatures:common-ligatures;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

h1{
  font-size:5.25rem !important;
  line-height:1.01 !important;
  letter-spacing:-0.016em !important;
  word-spacing:normal !important;
}

h2{
  font-size:4rem !important;
  line-height:1.03 !important;
  letter-spacing:-0.012em !important;
  word-spacing:normal !important;
}

h3{
  font-size:2.05rem !important;
  line-height:1.08 !important;
  letter-spacing:-0.008em !important;
  word-spacing:normal !important;
}

.hero-copy h1,
.feature-copy h2,
.overview-grid h2,
.section-heading h2,
.cta-band h2{
  text-wrap:balance;
  max-width:100%;
}

.lead,
.section-text,
.mini-card p,
.service-tile p,
.showcase-card p,
.cta-copy p,
.footer-brand p,
.footer-col p{
  letter-spacing:0 !important;
  word-spacing:normal !important;
}

@media (max-width:1300px){
  h1{font-size:4.7rem !important;}
  h2{font-size:3.6rem !important;}
}
@media (max-width:1100px){
  h1{font-size:4rem !important;}
  h2{font-size:3rem !important;}
  h3{font-size:1.9rem !important;}
}
@media (max-width:760px){
  h1{font-size:2.9rem !important; line-height:1.03 !important;}
  h2{font-size:2.35rem !important; line-height:1.05 !important;}
  h3{font-size:1.7rem !important; line-height:1.12 !important;}
}

/* Signage page image system
   The frames use consistent aspect ratios and object-fit:cover so the grid stays
   symmetrical while images fill the area without distortion.
*/
.signage-hero-image{
  width:100%;
  min-height:0;
  aspect-ratio:5 / 6;
}
.signage-hero-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.signage-applications .mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.signage-applications .mini-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.signage-applications .signage-card-image{
  width:100%;
  aspect-ratio:1 / 1;
  min-height:0 !important;
  margin-bottom:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#eee6da;
}
.signage-applications .signage-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.signage-detail-image{
  width:100%;
  min-height:0;
  aspect-ratio:3 / 2;
}
.signage-detail-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media (max-width:1100px){
  .signage-hero-image{aspect-ratio:4 / 5;}
  .signage-detail-image{aspect-ratio:4 / 3;}
}

@media (max-width:760px){
  .signage-applications .mini-grid{grid-template-columns:1fr;}
  .signage-hero-image{aspect-ratio:4 / 5;}
  .signage-applications .signage-card-image{aspect-ratio:4 / 3;}
  .signage-detail-image{aspect-ratio:4 / 3;}
}

/* =========================================================
   DRAFT 32 — SIGNAGE HERO ALIGNMENT + UNCROPPED RECEPTION SIGN
========================================================= */

/* Align the hero image with the top of the main H1 rather than vertically
   centering it against the entire text block. The offset corresponds to the
   eyebrow label and its bottom spacing, so it remains stable when browser
   zoom changes. */
.signage-service-hero .hero-grid{
  align-items:start;
}
.signage-service-hero .hero-media{
  margin-top:2.35rem;
}
.signage-service-hero .signage-hero-image{
  min-height:0 !important;
  height:auto;
  aspect-ratio:4 / 3;
  overflow:hidden;
}
.signage-service-hero .signage-hero-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Use one consistent landscape ratio for every signage application card.
   This is also the native ratio of the Reception photo, so the complete word
   'RECEPTION' remains visible instead of being clipped by a square crop. */
.signage-applications .signage-card-image{
  aspect-ratio:3 / 2 !important;
}
.signage-applications .signage-card-image img{
  object-fit:cover;
}
.signage-applications .mini-card:nth-child(1) .signage-card-image img{
  object-position:50% 38%;
}
.signage-applications .mini-card:nth-child(2) .signage-card-image img{
  object-position:center center;
}
.signage-applications .mini-card:nth-child(3) .signage-card-image img,
.signage-applications .mini-card:nth-child(4) .signage-card-image img{
  object-position:center;
}

@media (max-width:760px){
  .signage-service-hero .hero-media{
    margin-top:0;
  }
  .signage-service-hero .signage-hero-image{
    aspect-ratio:4 / 3;
  }
  .signage-applications .signage-card-image{
    aspect-ratio:3 / 2 !important;
  }
}

/* =========================================================
   DRAFT 34 — FABRIC PRINTING IMAGES + GLOBAL HEADING RHYTHM
========================================================= */

/* Consistent breathing room between headings and the copy immediately below.
   This applies site-wide and remains proportional across responsive layouts. */
h1 + p,
h1 + .lead{
  margin-top:1.75rem !important;
}

h2 + p,
h2 + .section-text{
  margin-top:1.45rem !important;
}

h3 + p{
  margin-top:.8rem !important;
}

@media (max-width:760px){
  h1 + p,
  h1 + .lead{margin-top:1.4rem !important;}
  h2 + p,
  h2 + .section-text{margin-top:1.15rem !important;}
  h3 + p{margin-top:.7rem !important;}
}

/* Fabric Printing hero — preserve portrait composition without distortion. */
.fabric-service-hero .hero-grid{
  align-items:start;
}
.fabric-hero-image{
  width:100%;
  height:auto;
  min-height:0 !important;
  aspect-ratio:5 / 6;
  overflow:hidden;
}
.fabric-hero-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 43%;
}

/* Four equal application cards. All frames stay the same size so the grid is
   visually symmetrical; images are cropped rather than stretched. */
.fabric-applications .mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.fabric-applications .mini-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.fabric-applications .fabric-card-image{
  width:100%;
  min-height:0 !important;
  aspect-ratio:3 / 2;
  margin-bottom:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#eee6da;
}
.fabric-applications .fabric-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.fabric-applications .mini-card:nth-child(1) .fabric-card-image img{
  object-position:50% 22%;
}
.fabric-applications .mini-card:nth-child(2) .fabric-card-image img{
  object-position:50% 34%;
}
.fabric-applications .mini-card:nth-child(3) .fabric-card-image img{
  object-position:center;
}
.fabric-applications .mini-card:nth-child(4) .fabric-card-image img{
  object-position:50% 31%;
}

/* Lower feature image uses a landscape frame to balance the text column. */
.fabric-detail-image{
  width:100%;
  height:auto;
  min-height:0 !important;
  aspect-ratio:4 / 3;
  overflow:hidden;
}
.fabric-detail-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 36%;
}

@media (max-width:1100px){
  .fabric-hero-image{aspect-ratio:4 / 5;}
}

@media (max-width:760px){
  .fabric-applications .mini-grid{grid-template-columns:1fr;}
  .fabric-hero-image{aspect-ratio:4 / 5;}
  .fabric-applications .fabric-card-image{aspect-ratio:3 / 2;}
  .fabric-detail-image{aspect-ratio:4 / 3;}
}


/* =========================================================
   DRAFT 35 — FABRIC BACKDROP SWAP + PORTRAIT FLAG FIT
========================================================= */

/* Exhibition Backdrops uses a pre-cropped 3:2 source, so it fills the shared
   card frame without stretching and keeps the main hanging graphic readable. */
.fabric-applications .mini-card:nth-child(2) .fabric-card-image img{
  object-fit:cover;
  object-position:center;
}

/* Keep the complete portrait soft-signage banner visible inside the same 3:2
   card frame. A softly enlarged copy fills the background, avoiding empty bars
   while the foreground image remains undistorted. */
.fabric-applications .mini-card:nth-child(4) .fabric-card-image{
  position:relative;
  isolation:isolate;
  background:#d8d0c4;
}
.fabric-applications .mini-card:nth-child(4) .fabric-card-image::before{
  content:"";
  position:absolute;
  inset:-7%;
  background-image:url("assets/fabric-flags-soft-signage.jpg");
  background-size:cover;
  background-position:center;
  filter:blur(14px) saturate(.72) brightness(.88);
  transform:scale(1.08);
  opacity:.72;
  z-index:0;
}
.fabric-applications .mini-card:nth-child(4) .fabric-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(247,241,230,.10);
  z-index:1;
}
.fabric-applications .mini-card:nth-child(4) .fabric-card-image img{
  position:relative;
  z-index:2;
  object-fit:contain;
  object-position:center;
}


/* =========================================================
   DRAFT 36 — FABRIC HERO H1 ALIGNMENT + FULL BACKDROP VIEW
========================================================= */

/* Desktop/tablet: align the top of the Fabric Printing hero image with the
   top of the large H1, not with the small eyebrow label above it. */
.fabric-service-hero .hero-grid{
  align-items:start;
}
.fabric-service-hero .hero-media{
  margin-top:2.36rem;
}

/* Exhibition Backdrops: keep the complete Art Basel composition visible inside
   the same 3:2 card used by the other applications. A softened copy fills the
   side space so the card remains symmetrical without stretching the photo. */
.fabric-applications .mini-card:nth-child(2) .fabric-card-image{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#262626;
}
.fabric-applications .mini-card:nth-child(2) .fabric-card-image::before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image:url("assets/fabric-exhibition-backdrops.jpg");
  background-size:cover;
  background-position:center;
  filter:blur(16px) saturate(.78) brightness(.72);
  transform:scale(1.08);
  opacity:.72;
  z-index:0;
}
.fabric-applications .mini-card:nth-child(2) .fabric-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(13,12,10,.08);
  z-index:1;
}
.fabric-applications .mini-card:nth-child(2) .fabric-card-image img{
  position:relative;
  z-index:2;
  object-fit:contain;
  object-position:center;
}

@media (max-width:1100px){
  /* Once the hero stacks vertically, the image should follow the text block
     naturally rather than keeping the desktop alignment offset. */
  .fabric-service-hero .hero-media{
    margin-top:0;
  }
}


/* =========================================================
   DRAFT 37 — EXHIBITION IMAGES, SERVICE DIVIDERS & HEADING LEADING
========================================================= */

/* Global heading line-height repair.
   Large Cormorant headings need more leading so ascenders/descenders never
   collide as viewport width or browser zoom changes. */
h1{
  line-height:1.10 !important;
  letter-spacing:-.014em !important;
}
h2{
  line-height:1.12 !important;
  letter-spacing:-.010em !important;
}
h3{
  line-height:1.15 !important;
  letter-spacing:-.006em !important;
}

.hero-copy h1,
.overview-grid h2,
.section-heading h2,
.feature-copy h2,
.cta-band h2{
  text-wrap:balance;
}

@media (max-width:1100px){
  h1{line-height:1.10 !important;}
  h2{line-height:1.12 !important;}
  h3{line-height:1.16 !important;}
}
@media (max-width:760px){
  h1{line-height:1.11 !important;}
  h2{line-height:1.13 !important;}
  h3{line-height:1.17 !important;}
}

/* Same subtle section divider already used on Digital Printing. */
.fabric-printing-overview-section .container,
.exhibition-overview-section .container{
  border-top:1px solid var(--line);
  padding-top:68px;
}

/* Exhibition hero: a fixed 4:3 frame keeps the wide crop proportional. */
.exhibition-service-hero .hero-grid{
  align-items:center;
}
.exhibition-hero-image{
  width:100%;
  min-height:0 !important;
  aspect-ratio:4 / 3;
  overflow:hidden;
}
.exhibition-hero-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Exhibition application grid: one common 3:2 image frame across all cards. */
.exhibition-applications .mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.exhibition-applications .mini-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.exhibition-applications .exhibition-card-image{
  width:100%;
  min-height:0 !important;
  aspect-ratio:3 / 2;
  margin-bottom:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#eee6da;
}
.exhibition-applications .exhibition-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Detail image matches the wide 3:2 photography and balances the copy column. */
.exhibition-detail-image{
  width:100%;
  min-height:0 !important;
  aspect-ratio:3 / 2;
  overflow:hidden;
}
.exhibition-detail-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media (max-width:1100px){
  .exhibition-service-hero .hero-grid{align-items:start;}
}
@media (max-width:760px){
  .fabric-printing-overview-section .container,
  .exhibition-overview-section .container{
    padding-top:46px;
  }
  .exhibition-applications .mini-grid{grid-template-columns:1fr;}
  .exhibition-hero-image{aspect-ratio:4 / 3;}
  .exhibition-applications .exhibition-card-image{aspect-ratio:3 / 2;}
  .exhibition-detail-image{aspect-ratio:3 / 2;}
}

/* =========================================================
   DRAFT 38 — EXHIBITION ALIGNMENT / IMAGE MAPPING / SERVICE DIVIDERS
========================================================= */

/* Exhibition hero: align the image with the top of the large H1, not the
   small uppercase eyebrow. 2.36rem matches the eyebrow line + its spacing. */
.exhibition-service-hero .hero-grid{
  align-items:start;
}
.exhibition-service-hero .hero-media{
  margin-top:2.36rem;
}

/* Add the same subtle hero-to-overview divider to Acrylic Fabrication and
   Signage that is already used on the other core service pages. */
.acrylic-overview-section .container,
.signage-overview-section .container{
  border-top:1px solid var(--line);
  padding-top:68px;
}

/* Corrected Exhibition card mapping.
   Portrait photographs stay fully proportionate inside the shared 3:2 frame.
   A softened copy fills the unused frame area so every card remains the same
   size without stretching or sacrificing the main subject. */
.exhibition-applications .mini-card:nth-child(2) .exhibition-card-image,
.exhibition-applications .mini-card:nth-child(4) .exhibition-card-image{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.exhibition-applications .mini-card:nth-child(2) .exhibition-card-image{
  background:#171715;
}
.exhibition-applications .mini-card:nth-child(2) .exhibition-card-image::before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image:url("assets/exhibition-custom-booth-features.jpg");
  background-size:cover;
  background-position:center;
  filter:blur(16px) saturate(.72) brightness(.70);
  transform:scale(1.08);
  opacity:.80;
  z-index:0;
}
.exhibition-applications .mini-card:nth-child(2) .exhibition-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,8,7,.08);
  z-index:1;
}
.exhibition-applications .mini-card:nth-child(2) .exhibition-card-image img{
  position:relative;
  z-index:2;
  object-fit:contain;
  object-position:center;
}

/* Backdrops & Graphics: modest crop only; the source is close enough to a
   landscape ratio that cover keeps the wall graphics prominent. */
.exhibition-applications .mini-card:nth-child(3) .exhibition-card-image img{
  object-fit:cover;
  object-position:center 48%;
}

.exhibition-applications .mini-card:nth-child(4) .exhibition-card-image{
  background:#d8d0c3;
}
.exhibition-applications .mini-card:nth-child(4) .exhibition-card-image::before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image:url("assets/exhibition-display-product-zones.jpg");
  background-size:cover;
  background-position:center;
  filter:blur(16px) saturate(.78) brightness(.82);
  transform:scale(1.08);
  opacity:.76;
  z-index:0;
}
.exhibition-applications .mini-card:nth-child(4) .exhibition-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(247,241,230,.08);
  z-index:1;
}
.exhibition-applications .mini-card:nth-child(4) .exhibition-card-image img{
  position:relative;
  z-index:2;
  object-fit:contain;
  object-position:center;
}

@media (max-width:1100px){
  /* Once the hero stacks, remove the desktop alignment offset. */
  .exhibition-service-hero .hero-media{
    margin-top:0;
  }
}

@media (max-width:760px){
  .acrylic-overview-section .container,
  .signage-overview-section .container{
    padding-top:46px;
  }
}

/* =========================================================
   DRAFT 39 — PROJECTS EDITORIAL REDESIGN / SOCIAL / WHATSAPP
========================================================= */

/* More capabilities: make the production photograph the visual, while the
   existing message remains readable over a restrained dark gradient. */
.future-hero-panel.future-hero-photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#090909;
}
.future-hero-photo > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.future-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(5,5,5,.08) 8%,rgba(5,5,5,.18) 44%,rgba(5,5,5,.84) 100%);
}
.future-hero-photo .future-page-plus,
.future-hero-photo p{
  position:relative;
  z-index:2;
  text-shadow:0 2px 20px rgba(0,0,0,.34);
}

/* About hero photography */
.about-hero-image{
  width:100%;
  aspect-ratio:3 / 2;
  overflow:hidden;
  border:1px solid var(--line);
  background:#131313;
}
.about-hero-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Dedicated social-presence block: deliberately typographic rather than
   generic oversized social cards. Profile URLs can be wired in later. */
.about-social-section{
  background:var(--black);
  color:#d4c8b8;
}
.about-social-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:72px;
  align-items:start;
}
.about-social-section h2{color:#fff6e9; max-width:680px;}
.about-social-list{border-top:1px solid #282520;}
.about-social-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid #282520;
}
.about-social-item span{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;
  line-height:1.15;
  color:#fff6e9;
}
.about-social-item small{
  font-size:12px;
  letter-spacing:.06em;
  color:#9f927f;
  text-align:right;
}

/* Footer and contact social presence */
.footer-contact-col p a,
.contact-info-box a{color:inherit;}
.footer-socials,
.contact-socials{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:12px;
}
.footer-socials span,
.contact-socials span{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.footer-socials span{color:#a99b88;}
.contact-socials{padding-top:16px; border-top:1px solid var(--line);}
.contact-socials span{color:#7d7060;}

/* Small site-wide WhatsApp launcher. Monochrome by default so it belongs to
   the visual system; WhatsApp green appears only as a restrained hover cue. */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--black);
  color:#f7f1e6;
  border:1px solid rgba(247,241,230,.18);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.whatsapp-float svg{width:25px; height:25px; display:block;}
.whatsapp-float:hover{
  background:#25D366;
  color:#07150c;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.whatsapp-float:focus-visible{outline:2px solid #25D366; outline-offset:3px;}

/* Projects: replace photo-dependent pseudo case studies with a durable
   editorial project-type system. */
.projects-page-hero .hero-grid{align-items:center;}
.projects-hero-image{
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border:1px solid var(--line);
  background:#c84436;
}
.projects-hero-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.projects-types-intro{
  display:grid;
  grid-template-columns:.48fr 1.52fr;
  gap:56px;
  align-items:start;
  padding-bottom:54px;
}
.projects-types-intro h2{max-width:940px;}
.projects-types-intro .section-text{max-width:850px; margin-top:24px;}
.project-type-list{border-top:1px solid var(--line);}
.project-type-row{
  display:grid;
  grid-template-columns:90px minmax(280px,.75fr) minmax(360px,1.25fr);
  gap:38px;
  align-items:start;
  padding:42px 0;
  border-bottom:1px solid var(--line);
}
.project-type-index{
  padding-top:8px;
  font-size:11px;
  letter-spacing:.2em;
  color:#8e7f6a;
}
.project-type-title h3{
  font-size:clamp(34px,3.1vw,52px);
  line-height:1.12 !important;
}
.project-type-copy p{
  max-width:720px;
  font-size:18px;
  color:var(--muted);
}
.project-type-services{
  margin-top:20px;
  font-size:11px;
  line-height:1.7;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#786b5a;
}
.project-type-services span{padding:0 7px; color:#b2a38f;}
.projects-capability-band{
  margin-top:72px;
  padding:42px 48px 46px;
  background:var(--black);
  color:#f4eadb;
}
.projects-capability-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid #29251f;
  margin-top:18px;
}
.projects-capability-grid span{
  padding:24px 18px 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:28px;
  color:#fff6e9;
}

@media(max-width:1100px){
  .about-social-grid,
  .projects-types-intro{grid-template-columns:1fr; gap:32px;}
  .project-type-row{grid-template-columns:64px 1fr; gap:26px;}
  .project-type-copy{grid-column:2;}
  .projects-capability-grid{grid-template-columns:repeat(3,1fr); row-gap:18px;}
}

@media(max-width:760px){
  .about-hero-image{aspect-ratio:4 / 3;}
  .about-social-item{grid-template-columns:1fr; gap:4px;}
  .about-social-item small{text-align:left;}
  .whatsapp-float{right:14px; bottom:14px; width:46px; height:46px;}
  .project-type-row{grid-template-columns:42px 1fr; gap:18px; padding:32px 0;}
  .project-type-copy{grid-column:1 / -1; padding-left:60px;}
  .projects-capability-band{margin-top:52px; padding:34px 24px 38px;}
  .projects-capability-grid{grid-template-columns:repeat(2,1fr);}
  .projects-capability-grid span{font-size:25px;}
  .projects-hero-image{aspect-ratio:4 / 3;}
}


/* DRAFT 40 — ABOUT APPROACH, SOCIAL ICONS, CONTACT US */

/* Keep the expanded main navigation balanced after adding Contact Us. */
@media (min-width:1101px){
  .main-nav{gap:clamp(16px,1.5vw,26px)}
  .main-nav a{font-size:15px}
  .nav-shell{gap:clamp(18px,1.8vw,28px)}
}

/* About: replace the social-channel feature with a useful production approach. */
.about-approach-section{
  background:var(--black);
  color:var(--sand);
}
.about-approach-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(52px,6vw,88px);
  align-items:start;
}
.about-approach-intro h2{
  color:#f4eadb;
  max-width:670px;
}
.about-approach-intro .approach-intro-copy{
  margin-top:30px;
  max-width:620px;
  color:#aa9d8c;
}
.approach-list{border-top:1px solid #2a2722;}
.approach-item{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:22px;
  padding:27px 0 29px;
  border-bottom:1px solid #2a2722;
}
.approach-index{
  padding-top:6px;
  font-size:11px;
  letter-spacing:.2em;
  color:#8f806c;
}
.approach-item h3{
  color:#f4eadb;
  font-size:clamp(27px,2.2vw,36px);
  line-height:1.12 !important;
  margin-bottom:8px;
}
.approach-item p{
  max-width:650px;
  color:#a99b88;
  font-size:15px;
  line-height:1.7;
}

/* Social platform marks: logos only, in the same warm beige as the site. */
.footer-socials,
.contact-socials,
.contact-us-socials{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.footer-socials .social-icon,
.contact-socials .social-icon,
.contact-us-socials .social-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(216,201,178,.28);
  border-radius:50%;
  color:var(--sand);
}
.footer-socials .social-icon svg,
.contact-socials .social-icon svg,
.contact-us-socials .social-icon svg{
  width:17px;
  height:17px;
  display:block;
}
.contact-socials{padding-top:16px;border-top:1px solid var(--line);}
.contact-socials .social-icon{color:#8e7f6a;border-color:rgba(142,127,106,.32);}

/* WhatsApp: warm cream/beige, never stark white or bright green. */
.whatsapp-float{
  color:var(--sand) !important;
  background:#090807 !important;
  border-color:rgba(216,201,178,.30) !important;
}
.whatsapp-float:hover{
  color:var(--cream) !important;
  background:#17130f !important;
  border-color:rgba(216,201,178,.58) !important;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}
.whatsapp-float:focus-visible{outline:2px solid var(--sand);outline-offset:3px;}

/* Dedicated Contact Us page. The quote form remains a separate Request a Quote page. */
.contact-us-hero{padding:86px 0 96px;}
.contact-us-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(54px,7vw,100px);
  align-items:stretch;
}
.contact-us-copy{padding-top:20px;}
.contact-us-copy h1{max-width:760px;}
.contact-us-card{
  min-height:520px;
  background:var(--black);
  color:var(--sand);
  padding:clamp(34px,4vw,58px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-us-detail{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid #2a2722;
}
.contact-us-detail:first-of-type{border-top:1px solid #2a2722;}
.contact-us-detail span,
.contact-us-social-row > span{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8f806c;
}
.contact-us-detail a,
.contact-us-detail strong{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(23px,2.1vw,32px);
  line-height:1.18;
  color:#f4eadb;
  font-weight:400;
  overflow-wrap:anywhere;
}
.contact-us-social-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  align-items:center;
  padding-top:24px;
}
.contact-us-socials{margin-top:0;}
.contact-route-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.contact-route-grid article{
  min-height:300px;
  padding:34px 30px;
  border:1px solid var(--line);
  background:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.route-index{font-size:11px;letter-spacing:.2em;color:#8e7f6a;margin-bottom:32px;}
.contact-route-grid h3{font-size:34px;line-height:1.12 !important;margin-bottom:13px;}
.contact-route-grid p{color:var(--muted);margin-bottom:26px;}
.contact-route-grid .text-link{margin-top:auto;}

@media(max-width:1100px){
  .about-approach-grid,
  .contact-us-hero-grid{grid-template-columns:1fr;gap:42px;}
  .contact-us-card{min-height:auto;}
  .contact-route-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .approach-item{grid-template-columns:42px 1fr;gap:14px;}
  .contact-us-hero{padding:56px 0 70px;}
  .contact-us-card{padding:30px 24px;}
  .contact-us-detail,
  .contact-us-social-row{grid-template-columns:1fr;gap:7px;}
  .contact-us-social-row{align-items:start;}
  .footer-socials .social-icon,
  .contact-socials .social-icon,
  .contact-us-socials .social-icon{width:30px;height:30px;}
}

/* =========================================================
   DRAFT 44 — DISPLAY PRINTING FULL-IMAGE FIT
========================================================= */
/* Keep the portrait display-printing photograph completely visible inside the
   same 4:3 application frame. Higher specificity intentionally overrides the
   older application-card cover rule without stretching the source image. */
.digital-printing-applications .mini-card.display-printing-card .mini-image.service-photo.dp-stage img{
  object-fit:contain !important;
  object-position:center center !important;
  width:100% !important;
  height:100% !important;
  padding:10px !important;
  box-sizing:border-box;
}