/* Gift-Tech V9 responsive/commercial refinement */
:root{
  --gt-container:1440px;
  --gt-section:clamp(72px,7vw,112px);
  --gt-section-mobile:clamp(46px,12vw,64px);
}
html{overflow-x:clip}
body{overflow-x:clip}
.container{max-width:var(--gt-container)}

/* Branded preloader */
.site-preloader{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;background:
 radial-gradient(circle at 18% 18%,rgba(112,71,232,.42),transparent 34%),
 radial-gradient(circle at 82% 80%,rgba(200,242,58,.10),transparent 30%),
 linear-gradient(145deg,#1d075f 0%,#281078 48%,#4B22D8 100%);color:#fff;opacity:1;visibility:visible;transition:opacity .48s ease,visibility .48s ease}
.site-preloader:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 86%)}
.site-preloader.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.preloader-inner{position:relative;width:min(90vw,540px);padding:30px 28px;text-align:center}
.preloader-logo{width:min(390px,76vw);height:auto;margin:0 auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.28));animation:gtLogoIn .75s cubic-bezier(.2,.8,.2,1) both}
.preloader-slogan{margin:20px 0 0;color:rgba(255,255,255,.9);font:700 clamp(14px,2.1vw,19px)/1.4 "Plus Jakarta Sans",Inter,sans-serif;letter-spacing:.01em;animation:gtFadeUp .7s .22s both}
.preloader-bar{position:relative;width:min(270px,62vw);height:3px;margin:26px auto 0;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.18);animation:gtFadeUp .7s .32s both}
.preloader-bar span{position:absolute;inset:0 auto 0 0;width:38%;border-radius:inherit;background:linear-gradient(90deg,var(--lime),#fff,var(--lime));box-shadow:0 0 18px rgba(200,242,58,.7);animation:gtLoad 1.05s ease-in-out infinite}
@keyframes gtLogoIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes gtFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gtLoad{0%{transform:translateX(-120%)}100%{transform:translateX(365%)}}

/* Header/nav: keep full desktop nav only when it actually fits */
.nav-shell{gap:18px}
.brand img{height:44px;max-width:188px}
.desktop-nav.v7-nav{gap:clamp(8px,.72vw,14px)}
.desktop-nav.v7-nav .nav-link{font-size:clamp(10.3px,.76vw,11.8px);padding-inline:0}
.header-cta.v7-header-cta{min-width:128px;padding:13px 14px}
.topbar-right{min-width:0;justify-content:flex-end}
.topbar-right span:first-child{max-width:min(44vw,650px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Global section rhythm and bottom breathing room */
.section{padding-block:var(--gt-section)}
.section.tight{padding-block:clamp(56px,5.5vw,80px)}
main>.section:last-child{padding-bottom:var(--gt-section)}
.job-callout{padding-block:clamp(54px,6vw,82px)!important}
.job-callout+.cta-band{margin-top:0}
.cta-band{padding-block:clamp(64px,6vw,92px)}
.footer{padding-top:clamp(64px,6vw,88px);padding-bottom:max(18px,env(safe-area-inset-bottom))}
.footer-bottom{min-height:78px;padding-bottom:max(12px,env(safe-area-inset-bottom))}

/* Hero: clearer message, calmer layout, less collision with controls */
.home-hero.v7-hero{height:clamp(650px,78vh,820px);min-height:650px}
.v7-hero .hero-slide:after{background:linear-gradient(90deg,rgba(24,7,81,.96) 0%,rgba(34,11,108,.88) 46%,rgba(31,10,96,.58) 74%,rgba(17,17,17,.26) 100%)}
.v7-hero .hero-content{padding-top:28px;padding-bottom:118px;align-items:center}
.v7-hero .hero-copy{max-width:900px}
.v7-hero .hero-eyebrow{font-size:10.5px;letter-spacing:.1em;padding:0;margin-bottom:16px;background:none}
.v7-hero .hero-title{max-width:19ch;font-size:clamp(40px,4.65vw,68px);line-height:1.035;letter-spacing:-.04em}
.v7-hero .hero-text{max-width:760px;font-size:clamp(15px,1.08vw,18px);line-height:1.58;margin:18px 0 0;color:rgba(255,255,255,.86)}
.hero-audience{max-width:760px;margin:13px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.74)}
.hero-proof{justify-content:flex-start;margin:19px 0 0;max-width:820px}
.hero-actions{margin-top:22px}
.hero-capability-rail{grid-template-columns:repeat(4,1fr);bottom:62px;width:min(980px,calc(100% - 170px))}
.v7-hero .hero-controls{bottom:16px}
.hero-dot{min-width:38px;min-height:5px}

/* Selected work: preserve the wide live-site presentation instead of dense case-study blocks */
.home-selected-work .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.home-selected-work .project-card{height:100%;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--lav2);box-shadow:0 20px 55px -42px rgba(40,16,120,.36)}
.home-selected-work .project-img{aspect-ratio:16/7.7;background:#f4f1ff;overflow:hidden}
.home-selected-work .project-img img{width:100%;height:100%;object-fit:contain;object-position:top center;background:#f4f1ff}
.home-selected-work .project-body{padding:28px 24px 30px}
.home-selected-work .project-body h3{font-size:clamp(22px,1.65vw,27px);margin:8px 0 8px}
.home-selected-work .project-body p{max-width:62ch;font-size:14px;line-height:1.65}
.home-selected-work .project-meta{margin-top:16px}
.home-selected-work .project-link{margin-top:22px}

/* Better card and content spacing */
.section-heading{margin-bottom:clamp(32px,4vw,50px)}
.section-end-actions{margin-top:clamp(30px,4vw,44px)}
.core-service-grid,.case-grid,.agency-grid,.course-grid,.project-grid{align-items:stretch}
.core-service,.case-card,.course-card,.compare-card,.agency-card{height:100%}
.contact-form,.job-form,.job-help,.trust-panel{min-width:0}
iframe{max-width:100%}

/* Responsive tables/comparisons/images */
.certificate-scroller{padding-bottom:24px}
.lightbox{padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.lightbox img{max-height:calc(100dvh - 42px);max-width:min(92vw,900px);object-fit:contain}
.wa-launcher{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}

@media(max-width:1240px) and (min-width:1181px){
  :root{--gutter:clamp(24px,2.4vw,34px)}
  .brand img{height:41px;max-width:170px}
  .nav-shell{gap:13px}
  .desktop-nav.v7-nav{gap:9px}
  .desktop-nav.v7-nav .nav-link{font-size:10.2px}
  .header-cta.v7-header-cta{min-width:116px;padding-inline:11px;font-size:11px}
}

@media(max-width:1180px){
  :root{--header:72px}
  .desktop-nav,.header-cta{display:none!important}
  .menu-button{display:flex!important;margin-left:auto}
  .mobile-menu{display:block!important}
  .brand img{height:42px;max-width:184px}
  .nav-shell{gap:14px}
}

@media(max-width:1020px){
  .home-hero.v7-hero{height:clamp(680px,79svh,760px);min-height:680px}
  .v7-hero .hero-content{padding-top:24px;padding-bottom:110px}
  .v7-hero .hero-title{font-size:clamp(39px,6.4vw,59px);max-width:18ch}
  .hero-capability-rail{grid-template-columns:repeat(4,1fr);width:calc(100% - 56px);left:28px;right:28px;transform:none}
  .hero-capability-rail a:nth-child(n){display:flex}
  .footer-grid{gap:36px 28px}
}

@media(max-width:820px){
  .hero-capability-rail{grid-template-columns:repeat(2,1fr);bottom:62px}
  .hero-capability-rail a{min-height:40px;padding:8px 10px}
  .v7-hero .hero-content{padding-bottom:145px}
  .commercial-strip-inner{grid-template-columns:1fr 1fr}
  .commercial-audience{grid-column:1/-1;padding-right:0}
}

@media(max-width:900px){
  .home-selected-work .project-grid{grid-template-columns:1fr}
  .home-selected-work .project-img{aspect-ratio:16/8.2}
}

@media(max-width:720px){
  :root{--gutter:20px}
  .site-preloader:before{background-size:32px 32px}
  .preloader-inner{padding-inline:18px}
  .topbar{display:none}
  .mobile-menu{top:var(--header);max-height:calc(100dvh - var(--header));overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
  .mobile-links{padding-top:12px;padding-bottom:max(24px,env(safe-area-inset-bottom));gap:0}
  .mobile-link{padding:11px 2px}
  .mobile-cta{min-height:48px;margin-top:14px}

  .home-hero.v7-hero{height:auto;min-height:760px}
  .v7-hero .hero-content{min-height:760px;padding-top:38px;padding-bottom:150px;align-items:center}
  .v7-hero .hero-title{font-size:clamp(34px,9.6vw,45px);line-height:1.04;max-width:17ch}
  .v7-hero .hero-eyebrow{font-size:9px;line-height:1.35;margin-bottom:13px}
  .v7-hero .hero-text{font-size:14px;line-height:1.5;margin-top:15px}
  .hero-audience{font-size:11.5px;line-height:1.45;margin-top:10px}
  .hero-proof{gap:6px;margin-top:15px}
  .hero-proof span{min-height:29px;font-size:9px;padding:6px 8px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}
  .hero-actions .btn{width:100%;min-height:48px}
  .hero-capability-rail{left:20px;right:20px;width:auto;bottom:55px;grid-template-columns:repeat(2,1fr);border-radius:13px}
  .hero-capability-rail a{font-size:8.8px;line-height:1.2;min-height:39px;padding:7px 6px}
  .v7-hero .hero-controls{left:20px;right:20px;bottom:13px}
  .hero-arrows{display:none}

  .section{padding-block:var(--gt-section-mobile)}
  .section.tight{padding-block:clamp(42px,10vw,56px)}
  .job-callout{padding-block:var(--gt-section-mobile)!important}
  .cta-band{padding-block:clamp(52px,12vw,68px)}
  .section-heading{margin-bottom:30px}
  .section-heading h2{font-size:clamp(29px,8.5vw,40px)}
  .section-heading p{font-size:14px;line-height:1.6}
  .commercial-strip-inner{grid-template-columns:1fr 1fr}
  .commercial-proof{min-height:86px}
  .commercial-audience{padding-block:18px}
  .core-service{min-height:auto!important;padding:23px 20px 22px}
  .core-service ul{margin-bottom:52px}
  .case-body{padding:22px 19px}
  .case-media{aspect-ratio:16/10}
  .agency-grid{gap:10px}
  .agency-card{padding:13px;min-height:128px}
  .contact-grid,.job-page-grid{gap:30px}
  .contact-form,.job-form{border-radius:20px}
  .comparison{grid-template-columns:1fr!important}
  .compare-card{padding:23px 20px}
  .certificate-thumb{flex-basis:min(76vw,280px)}
  .footer{padding-top:56px}
  .footer-grid{gap:34px 24px}
  .footer-bottom{margin-top:42px;padding-block:22px;line-height:1.6}
  .wa-launcher{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
}

@media(max-width:430px){
  :root{--gutter:17px}
  .brand img{height:38px;max-width:166px}
  .menu-button{width:43px;height:42px}
  .home-hero.v7-hero{min-height:780px}
  .v7-hero .hero-content{min-height:780px;padding-top:34px;padding-bottom:158px}
  .v7-hero .hero-title{font-size:clamp(32px,9.1vw,39px);max-width:18ch}
  .hero-proof span:nth-child(n){display:inline-flex}
  .hero-proof span{font-size:8.6px}
  .commercial-strip-inner{grid-template-columns:1fr}
  .commercial-proof{border-right:0;border-top:1px solid var(--v7-border)}
  .commercial-audience strong{font-size:14px}
  .core-service h3{font-size:18px}
  .core-service>p{font-size:12.5px}
  .audience-trust h2{font-size:30px}
  .trust-panel{padding:23px 18px}
  .simple-step{padding:23px 20px}
  .gallery-grid{columns:1}
  .agency-grid{grid-template-columns:1fr 1fr}
  .agency-card img{height:58px}
  .cta-actions,.job-callout-actions{display:grid;grid-template-columns:1fr;width:100%}
  .cta-actions .btn,.job-callout-actions .btn{width:100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand,.footer-grid>div:last-child{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .site-preloader,.site-preloader *{animation:none!important;transition-duration:.01ms!important}
  .preloader-bar span{width:100%;transform:none!important}
}

/* ============================================================
   V11 — TRUE FULL-WIDTH DESKTOP LAYOUT
   Keep only modest professional gutters on large displays.
   ============================================================ */
@media (min-width:1181px){
  :root{
    --gt-container:none;
    --gutter:clamp(24px,2.15vw,36px);
  }
  .container{
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-inline:var(--gutter);
  }
  .header .container,
  .topbar .container,
  .footer .container{
    max-width:none;
  }
  .home-selected-work .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(20px,1.6vw,30px);
  }
  .home-selected-work .project-img{
    aspect-ratio:16/7.25;
  }
  .home-selected-work .project-body{
    padding:clamp(24px,1.8vw,32px);
  }
  .hero-controls{
    max-width:none;
    margin-inline:0;
  }
}

@media (min-width:1600px){
  :root{--gutter:32px}
}

/* ============================================================
   V12 — READABILITY + PROFESSIONAL 20PX GUTTERS
   Keep the wide V11 composition, but make text comfortable to
   read and stop shrinking navigation just to force it to fit.
   ============================================================ */
:root{
  --gutter:20px;
  --gt-container:none;
}

/* True wide layout with a consistent, deliberate 20px edge gutter */
.container{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:20px;
}

/* General readability baseline */
body{
  font-size:16px;
  line-height:1.7;
}
.topbar{
  font-size:13px;
}
.topbar-left,.topbar-right{
  gap:20px;
}

/* Desktop navigation: readable first, then switch to mobile menu */
.nav-shell{
  gap:22px;
}
.brand img{
  height:48px;
  max-width:218px;
}
.desktop-nav.v7-nav{
  gap:clamp(13px,1.05vw,20px);
}
.desktop-nav.v7-nav .nav-link,
.nav-link{
  font-size:14px !important;
  line-height:1.2;
  font-weight:700;
  padding-block:28px;
}
.header-cta.v7-header-cta,
.header-cta{
  min-width:138px;
  min-height:48px;
  padding:0 18px;
  font-size:14px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Inner/page heroes: less dead space, clearer hierarchy */
.inner-hero{
  padding:clamp(58px,5.2vw,86px) 0;
}
.breadcrumbs{
  font-size:13px;
  line-height:1.5;
  margin-bottom:18px;
}
.inner-hero h1{
  font-size:clamp(40px,4.35vw,66px);
}
.inner-hero p{
  font-size:clamp(16px,1.08vw,18px);
  line-height:1.68;
}
.hero-statline span{
  font-size:13px;
}

/* Content typography — raise tiny text without making the site bulky */
.section-heading p,
.split-copy p,
.article-body p,
.contact-copy p,
.job-help p,
.project-body p,
.home-selected-work .project-body p,
.projects-case-copy>p,
.compare-card p,
.course-card p,
.service-card p{
  font-size:15.5px;
  line-height:1.7;
}
.section-heading p{
  font-size:clamp(16px,1.02vw,18px);
}
.kicker,
.case-kicker,
.core-service-num{
  font-size:11.5px;
}

/* Core/service cards */
.core-service h3{
  font-size:20px;
}
.core-service>p{
  font-size:14.5px;
  line-height:1.65;
}
.core-service li{
  font-size:13px;
  line-height:1.5;
}
.core-service a{
  font-size:13px;
}

/* Project / proof areas */
.home-selected-work .project-body h3{
  font-size:clamp(23px,1.55vw,28px);
}
.project-meta span,
.case-fact span,
.project-story span{
  font-size:13.5px;
  line-height:1.6;
}
.case-fact b,
.project-story b{
  font-size:11px;
}
.project-link,
.case-actions a{
  font-size:13px;
}

/* Trust/process strips */
.commercial-audience small{
  font-size:11px;
}
.commercial-audience strong{
  font-size:17px;
}
.commercial-proof b{
  font-size:19px;
}
.commercial-proof span{
  font-size:12.5px;
}
.audience-tags span{
  font-size:12.5px;
}
.trust-item strong{
  font-size:14px;
}
.trust-item span{
  font-size:12.5px;
  line-height:1.55;
}
.simple-step h3{
  font-size:17px;
}
.simple-step p{
  font-size:13.5px;
  line-height:1.65;
}

/* Forms, contact, FAQ and footer */
.field label,
.form-note,
.contact-details span{
  font-size:11.5px;
}
input,select,textarea{
  font-size:16px;
}
.contact-details a,.contact-details strong{
  font-size:15.5px;
}
.faq button{
  font-size:15.5px;
}
.faq-answer p{
  font-size:15px;
}
.footer p,
.footer a,
.footer li,
.footer-bottom{
  font-size:13.5px;
  line-height:1.65;
}
.footer h3,.footer h4{
  font-size:15px;
}
.btn{
  font-size:14px;
  min-height:50px;
}

/* Hero support text was also too small in the previous mobile refinement */
.v7-hero .hero-eyebrow{
  font-size:11px;
}
.v7-hero .hero-text{
  font-size:clamp(16px,1.08vw,18px);
}
.hero-audience{
  font-size:13px;
}
.hero-proof span{
  font-size:11px;
}
.hero-capability-rail a{
  font-size:11px;
}

/* Use mobile navigation earlier rather than compressing desktop text. */
@media(max-width:1339px){
  :root{--header:72px}
  .desktop-nav,.header-cta{display:none!important}
  .menu-button{display:flex!important;margin-left:auto}
  .mobile-menu{display:block!important}
  .brand img{height:43px;max-width:194px}
  .nav-shell{gap:14px}
}

@media(min-width:1340px){
  .desktop-nav{display:flex!important}
  .header-cta{display:inline-flex!important}
  .menu-button{display:none!important}
  .mobile-menu{display:none!important}
}

@media(max-width:720px){
  :root{--gutter:18px}
  .container{padding-inline:18px}
  .mobile-link{
    font-size:16px;
    line-height:1.35;
    padding:13px 2px;
  }
  .mobile-cta{
    font-size:15px;
  }
  .inner-hero{
    padding:50px 0 54px;
  }
  .breadcrumbs{
    font-size:12.5px;
  }
  .inner-hero p{
    font-size:16px;
  }
  .v7-hero .hero-eyebrow{
    font-size:10px;
  }
  .v7-hero .hero-text{
    font-size:15.5px;
  }
  .hero-audience{
    font-size:12.5px;
  }
  .hero-proof span{
    font-size:10.5px;
  }
  .hero-capability-rail a{
    font-size:10.5px;
  }
  .section-heading p,
  .split-copy p,
  .article-body p,
  .contact-copy p,
  .job-help p,
  .project-body p,
  .home-selected-work .project-body p,
  .projects-case-copy>p,
  .compare-card p,
  .course-card p,
  .service-card p{
    font-size:15px;
  }
  .core-service>p{
    font-size:14.5px;
  }
  .core-service li{
    font-size:13px;
  }
  .footer p,.footer a,.footer li,.footer-bottom{
    font-size:13.5px;
  }
}

@media(max-width:430px){
  :root{--gutter:16px}
  .container{padding-inline:16px}
  .brand img{height:39px;max-width:178px}
  .core-service h3{font-size:19px}
  .commercial-audience strong{font-size:15px}
}

/* V12.1 final readability pass requested after visual review */
@media(min-width:1340px){
  .desktop-nav.v7-nav .nav-link,.nav-link{font-size:15px!important}
  .header-cta.v7-header-cta,.header-cta{font-size:15px!important}
}
.topbar{font-size:13.5px}
.inner-hero{padding:clamp(42px,3.8vw,64px) 0}
.hero-badge,.pill,.legal-note,.side-card a:not(.btn),.project-link,.map-info a,.job-status{font-size:13px}
.project-meta span,.certificate-thumb span,.field label,.footer-proof span,.file-drop small,.file-list span,.form-note,.privacy-note,.job-steps p,.job-help-card p{font-size:12.5px;line-height:1.55}
.logo-item span,.agency-card strong{font-size:12.5px}
.wa-panel-brand span,.wa-team-copy small,.wa-panel-note,.v7-cta-note{font-size:12px;line-height:1.5}
.footer a,.footer>div p,.footer-bottom{font-size:13.5px;line-height:1.65}

@media(max-width:720px){
  :root{--gutter:20px}
  .container{padding-inline:20px}
  .inner-hero{padding:42px 0 46px}
}
@media(max-width:430px){
  :root{--gutter:20px}
  .container{padding-inline:20px}
}