/* ==========================================================================
   DigitalDeck — site stylesheet
   Ported from the Claude Design prototype (project/*.dc.html).
   Palette and type lives in :root so the brand can be retuned in one place.
   ========================================================================== */

:root{
  --accent:#009CB0;
  --accent-ink:#007e8f;
  --ink:#032641;
  --bg:#f4f6f7;
  --bg-alt:#eef2f4;
  --muted:#3a4d5a;
  --muted-2:#5a6b78;
  --muted-3:#7a8a96;
  --line:#cfd9df;
  --line-2:#dde4e8;
  --line-3:#e2e8ec;
  --font-display:'Sora',sans-serif;
  --font-body:'Manrope',sans-serif;
  --pad-x:48px;          /* outer gutter, narrows on small screens */
  --maxw:1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg);}
::selection{background:var(--accent); color:#fff;}
img{display:block; max-width:100%;}
a{color:inherit;}

/* Layout shell ----------------------------------------------------------- */
.site{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
.site-main{flex:1 0 auto;}
.container{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x);}

/* Shared eyebrow (dot + label) ------------------------------------------- */
.eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
.eyebrow__dot{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; flex:none;}
.eyebrow__label{font-size:13px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2);}

/* Headings --------------------------------------------------------------- */
.display{font-family:var(--font-display); font-weight:800; letter-spacing:-0.035em; line-height:0.95; margin:0;}
.section-title{font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em; line-height:1.0; margin:0;}
.lede{font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--muted); font-weight:500; margin:0;}

/* Kicker label (uppercase accent) ---------------------------------------- */
.kicker{font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:18px;}

/* Buttons / links -------------------------------------------------------- */
.btn{display:inline-block; font-family:var(--font-body); font-weight:700; text-decoration:none; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;}
.btn--dark{font-size:15px; color:#fff; background:var(--ink); padding:16px 28px; border:none; white-space:nowrap;}
.btn--dark:hover{background:var(--accent);}
.btn--outline{font-size:15px; color:var(--ink); background:transparent; padding:16px 28px; border:1.5px solid #c2ccd2; white-space:nowrap;}
.btn--outline:hover{border-color:var(--ink);}
.btn--light{font-size:16px; color:var(--ink); background:#fff; padding:18px 34px;}
.btn--light:hover{background:var(--accent); color:#fff;}
.btn--cta-nav{font-size:14px; color:#fff; background:var(--ink); padding:12px 22px;}
.btn--cta-nav:hover{background:var(--accent);}
.textlink{font-size:15px; font-weight:700; text-decoration:none; color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:4px; transition:color .15s;}
.textlink:hover{color:var(--accent);}

/* ==========================================================================
   Site navigation
   ========================================================================== */
.site-nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:20px var(--pad-x);
  background:rgba(244,246,247,0.82); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2);
  font-family:var(--font-body);
}
.site-nav__logo{display:flex; align-items:center; text-decoration:none;}
.site-nav__logo img{height:40px; width:auto;}
.site-nav__menu{display:flex; align-items:center; gap:36px;}
.nav-link{font-size:14px; font-weight:600; letter-spacing:0.01em; text-decoration:none; color:var(--muted); padding-bottom:4px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
.nav-link:hover{color:var(--accent);}
.nav-link.is-active{color:var(--ink); border-bottom-color:var(--accent);}

/* Hamburger toggle — hidden on desktop, shown by the mobile media query. */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 11px; margin:-6px -8px -6px 0; border:none; background:transparent; cursor:pointer;}
.nav-toggle span{display:block; height:2px; width:22px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}

/* ==========================================================================
   Page header (hero) — shared across inner pages
   ========================================================================== */
.page-head{padding-top:104px; padding-bottom:72px;}
.page-head__title{font-size:clamp(46px,7.5vw,100px); max-width:16ch; margin-bottom:32px;}
.page-head__lede{font-size:clamp(18px,2vw,22px); max-width:60ch;}

/* Home hero -------------------------------------------------------------- */
.hero{padding-top:120px; padding-bottom:90px;}
.hero__title{font-size:clamp(52px,8.5vw,118px); line-height:0.94; max-width:15ch; margin-bottom:36px;}
.hero__title .accent{color:var(--accent);}
.hero__row{display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap;}
.hero__lede{max-width:54ch;}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero .eyebrow{margin-bottom:34px;}

/* ==========================================================================
   Section heading block (kicker + title + optional link)
   ========================================================================== */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; flex-wrap:wrap;}
.section-head__title{font-size:clamp(34px,5vw,60px); max-width:16ch;}
.section-head .textlink{flex:none;}

/* ==========================================================================
   Services — list rows
   ========================================================================== */
.svc-list{padding-bottom:40px;}
.svc-list__inner{border-top:1px solid var(--line);}
.svc-row{display:grid; grid-template-columns:90px 1fr 1.25fr; gap:44px; padding:48px 0; border-bottom:1px solid var(--line); align-items:start;}
.svc-row__num{font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--accent); padding-top:6px;}
.svc-row__title{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.2vw,40px); letter-spacing:-0.025em; margin:0; line-height:1.04;}
.svc-row__body{font-size:17.5px; line-height:1.62; color:var(--muted); margin:0 0 22px; font-weight:500;}
.svc-row__tags{display:flex; flex-wrap:wrap; gap:9px;}
.tag{font-size:13px; font-weight:600; color:var(--accent-ink); background:#e2eef0; border:1px solid #c4dfe3; border-radius:999px; padding:7px 15px;}

/* Services — process band ------------------------------------------------ */
.process{background:var(--bg-alt); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);}
.process__inner{padding-top:104px; padding-bottom:104px;}
.process__title{font-size:clamp(32px,4.6vw,56px); max-width:20ch; margin-bottom:56px;}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.process-card{background:#fff; border:1px solid var(--line-3); border-radius:18px; padding:32px 28px; min-height:210px; display:flex; flex-direction:column;}
.process-card__num{font-family:var(--font-display); font-weight:800; font-size:40px; color:#d4dee3; letter-spacing:-0.03em; line-height:1;}
.process-card__title{font-family:var(--font-display); font-weight:700; font-size:21px; margin:20px 0 10px; letter-spacing:-0.02em;}
.process-card__body{font-size:15px; line-height:1.55; color:var(--muted); margin:0; font-weight:500;}

/* ==========================================================================
   CTA panel (dark) — shared
   ========================================================================== */
.cta{padding-top:120px; padding-bottom:120px;}
.cta__box{background:var(--ink); border-radius:26px; padding:clamp(48px,7vw,96px); position:relative; overflow:hidden;}
.cta__glow{position:absolute; top:-80px; right:-60px; width:320px; height:320px; border-radius:50%; background:var(--accent); opacity:0.18;}
.cta__inner{position:relative; max-width:62ch;}
.cta__title{font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5.5vw,64px); line-height:0.98; letter-spacing:-0.03em; color:#fff; margin:0 0 22px;}
.cta__text{font-size:19px; line-height:1.6; color:#9fb6c4; margin:0 0 40px; font-weight:500;}

/* ==========================================================================
   Home — trusted-by strip
   ========================================================================== */
.trusted{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--bg-alt);}
.trusted__inner{padding-top:30px; padding-bottom:30px; display:flex; align-items:center; gap:40px; flex-wrap:wrap;}
.trusted__label{font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-3); white-space:nowrap;}
.trusted__logos{display:flex; align-items:center; gap:36px; flex-wrap:wrap;}
.trusted__logo{font-family:var(--font-display); font-size:19px; font-weight:700; color:#9aa8b2; letter-spacing:-0.01em;}

/* Home — services preview ------------------------------------------------ */
.home-section{padding-top:112px; padding-bottom:112px;}
.svc-preview{border-top:1px solid var(--line);}
.svc-preview__row{text-decoration:none; color:inherit; display:grid; grid-template-columns:90px 1.1fr 1.3fr; gap:40px; padding:34px 0; border-bottom:1px solid var(--line); align-items:baseline; transition:padding-left .2s;}
.svc-preview__row:hover{padding-left:12px;}
.svc-preview__num{font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--accent);}
.svc-preview__title{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,30px); letter-spacing:-0.02em; margin:0; line-height:1.05;}
.svc-preview__body{font-size:16.5px; line-height:1.6; color:var(--muted); margin:0; font-weight:500;}

/* Home — work preview ---------------------------------------------------- */
.band{background:var(--bg-alt); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);}
.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:34px;}
.work-card{text-decoration:none; color:inherit; display:block;}
.work-card__shot{aspect-ratio:16/10; background-image:repeating-linear-gradient(45deg,#dde5e9 0 12px,#e7edf0 12px 24px); border:1px solid #d3dde2; border-radius:14px; display:flex; align-items:flex-end; padding:18px; overflow:hidden; transition:border-color .2s;}
.work-card:hover .work-card__shot{border-color:var(--accent);}
.shot-tag{font-size:12px; font-weight:600; letter-spacing:0.04em; color:#6b7d88; background:rgba(255,255,255,0.82); padding:6px 11px; border-radius:6px;}
.work-card__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:20px;}
.work-card__title{font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.02em; margin:0;}
.work-card__tag{font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); white-space:nowrap;}
.work-card__desc{font-size:16px; line-height:1.55; color:var(--muted); margin:8px 0 0; max-width:48ch; font-weight:500;}

/* Home — pages grid ------------------------------------------------------ */
.pages-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.page-card{text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line-3); border-radius:18px; padding:34px 32px; display:flex; flex-direction:column; min-height:200px; transition:border-color .2s;}
.page-card:hover{border-color:var(--accent);}
.page-card__kicker{font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:auto;}
.page-card__title{font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-0.02em; margin:28px 0 10px;}
.page-card__body{font-size:15.5px; line-height:1.55; color:var(--muted); margin:0 0 18px; font-weight:500;}
.page-card__cta{font-size:14px; font-weight:700; color:var(--ink);}

/* ==========================================================================
   Portfolio grid
   ========================================================================== */
.portfolio-head{padding-top:104px; padding-bottom:64px;}
.portfolio-head__row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.portfolio-head__title{font-size:clamp(46px,7.5vw,100px); max-width:12ch; margin:0;}
.portfolio-head__lede{font-size:17.5px; line-height:1.6; color:var(--muted); max-width:44ch; margin:0 0 8px; font-weight:500;}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px; padding-bottom:96px;}
.proj-card{text-decoration:none; color:inherit; display:flex; flex-direction:column;}
.proj-card__shot{aspect-ratio:4/3; background-image:repeating-linear-gradient(45deg,#dde5e9 0 12px,#e7edf0 12px 24px); border:1px solid #d3dde2; border-radius:14px; display:flex; align-items:flex-end; padding:16px; overflow:hidden; transition:border-color .2s;}
.proj-card:hover .proj-card__shot{border-color:var(--accent);}
.proj-card__shot .shot-tag{font-size:11px; padding:5px 10px; background:rgba(255,255,255,0.84);}
.proj-card__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:18px;}
.proj-card__title{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.02em; margin:0;}
.proj-card__tag{font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#fff; padding:4px 9px; border-radius:5px; white-space:nowrap;}
.proj-card__desc{font-size:14.5px; line-height:1.5; color:var(--muted); margin:8px 0 12px; flex:1; font-weight:500;}
.proj-card__link{font-size:12.5px; font-weight:700; color:var(--accent);}

/* project screenshot fills the card via a real <img> (native lazy-loading + alt text);
   the placeholder stripe stays as the background so it shows if an image is missing. */
.proj-card__shot, .work-card__shot{position:relative;}
.shot-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block; border:0;}
.proj-card__shot > .shot-tag, .work-card__shot > .shot-tag{position:relative; z-index:1;}

/* Lightbox (project cards set to "open full-size image") */
.lightbox{position:fixed; inset:0; z-index:200; display:none; overflow:auto; background:rgba(3,38,65,0.94); padding:48px 20px; cursor:zoom-out; -webkit-overflow-scrolling:touch;}
.lightbox.is-open{display:block;}
.lightbox__img{display:block; margin:0 auto; max-width:min(1100px,96vw); height:auto; border-radius:12px; box-shadow:0 30px 80px -24px rgba(0,0,0,0.7); background:#fff; cursor:default;}
.lightbox__close{position:fixed; top:16px; right:22px; width:46px; height:46px; border:none; background:rgba(255,255,255,0.14); color:#fff; font-size:30px; line-height:1; border-radius:50%; cursor:pointer; z-index:1; transition:background .15s;}
.lightbox__close:hover{background:rgba(255,255,255,0.26);}
/* zoom affordance on lightbox-enabled cards */
.js-lightbox .proj-card__shot::after, .js-lightbox .work-card__shot::after{content:"\2922"; position:absolute; top:10px; right:10px; z-index:1; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:rgba(3,38,65,0.6); color:#fff; border-radius:8px; font-size:15px; opacity:0; transition:opacity .2s;}
.js-lightbox:hover .proj-card__shot::after, .js-lightbox:hover .work-card__shot::after{opacity:1;}

/* tag colours */
.tag-agency{background:#5b6b8c;}
.tag-client{background:#009CB0;}
.tag-shop{background:#1f8a5b;}
.tag-site{background:#7a8a96;}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{padding-top:96px; padding-bottom:110px;}
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:80px; align-items:start;}
.contact-title{font-size:clamp(44px,6vw,80px); max-width:12ch; margin:0 0 26px;}
.contact-lede{font-size:18.5px; line-height:1.6; color:var(--muted); max-width:46ch; margin:0 0 48px; font-weight:500;}
.contact-facts{border-top:1px solid var(--line); display:flex; flex-direction:column;}
.contact-fact{display:flex; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.contact-fact__k{font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-3);}
.contact-fact__v{font-size:16px; font-weight:600;}

.contact-card{background:#fff; border:1px solid var(--line-3); border-radius:22px; padding:clamp(30px,4vw,48px);}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;}
.field--last{margin-bottom:26px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
.field label{font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--muted-2);}
.req{color:var(--accent); font-weight:700; margin-left:1px;}
.dd-input{font-family:var(--font-body); font-size:16px; font-weight:500; color:var(--ink); background:#f8fafb; border:1.5px solid var(--line-2); border-radius:12px; padding:14px 16px; transition:border-color .15s, box-shadow .15s; width:100%;}
.dd-input::placeholder{color:#9aa8b2;}
.dd-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,156,176,0.14);}
textarea.dd-input{resize:vertical;}
.dd-select{appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235a6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;}
.dd-select:invalid{color:#9aa8b2;}
.cf-field{margin-bottom:22px; min-height:65px;}
.form-btn{width:100%; font-family:var(--font-body); font-size:16px; font-weight:700; color:#fff; background:var(--ink); border:none; padding:17px; border-radius:12px; cursor:pointer; transition:background .15s;}
.form-btn:hover{background:var(--accent);}
.form-hint{font-size:13px; font-weight:500; color:var(--muted-3); margin:16px 0 0; text-align:center;}
.form-hint--error{color:#c0392b;}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-sent{padding:44px 8px; text-align:center;}
.form-sent__check{width:56px; height:56px; background:var(--accent); border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-family:var(--font-display);}
.form-sent__title{font-family:var(--font-display); font-weight:700; font-size:28px; margin:0 0 12px; letter-spacing:-0.02em;}
.form-sent__text{font-size:16.5px; line-height:1.6; color:var(--muted); margin:0 0 28px; font-weight:500;}
.form-sent__again{font-size:14px; font-weight:700; color:var(--ink); background:transparent; border:1.5px solid #c2ccd2; padding:13px 24px; border-radius:999px; cursor:pointer; font-family:var(--font-body); text-decoration:none; display:inline-block; transition:border-color .15s;}
.form-sent__again:hover{border-color:var(--ink);}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink); color:#9fb6c4; padding:80px var(--pad-x) 40px; font-family:var(--font-body);}
.site-footer__inner{max-width:var(--maxw); margin:0 auto;}
.footer-top{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid #143a54;}
.footer-brand img{height:46px; width:auto; margin-bottom:22px;}
.footer-brand p{max-width:360px; font-size:15.5px; line-height:1.65; color:#7e98a8; margin:0; font-weight:500;}
.footer-col__head{font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#5d7888; margin-bottom:18px;}
.footer-links{display:flex; flex-direction:column; gap:12px;}
.footer-links a{color:#cdd9e1; text-decoration:none; font-size:15.5px; font-weight:500; transition:color .15s;}
.footer-links a:hover{color:#fff;}
.footer-contact{display:flex; flex-direction:column; gap:12px; font-size:15.5px; color:#7e98a8; font-weight:500;}
.footer-contact a{color:#3fc5d6; text-decoration:none; font-weight:700; transition:color .15s;}
.footer-contact a:hover{color:#fff;}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:28px; font-size:13px; color:#5d7888; font-weight:500; flex-wrap:wrap;}

/* ==========================================================================
   Responsive — the prototype was desktop-only; these keep it usable down to
   phones without changing the desktop rendering.
   ========================================================================== */
@media (max-width:1024px){
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .pages-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{gap:56px;}
}

@media (max-width:860px){
  :root{--pad-x:24px;}
  .work-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:48px;}
  .svc-row{grid-template-columns:56px 1fr; gap:10px 24px;}
  .svc-row__main{grid-column:1 / -1;}
  .svc-preview__row{grid-template-columns:56px 1fr; gap:6px 20px;}
  .svc-preview__body{grid-column:2 / -1;}
  .page-head{padding-top:80px; padding-bottom:48px;}
  .hero{padding-top:80px; padding-bottom:64px;}
  .home-section,.process__inner{padding-top:72px; padding-bottom:72px;}
  .cta{padding-top:80px; padding-bottom:80px;}
}

/* Mobile navigation — collapse the inline links into a hamburger dropdown. */
@media (max-width:760px){
  .site-nav{padding:16px 24px;}
  .nav-toggle{display:flex;}
  .site-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-nav.is-open .nav-toggle span:nth-child(2){opacity:0;}
  .site-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .site-nav__menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line-2);
    padding:8px 24px 20px; box-shadow:0 22px 28px -24px rgba(3,38,65,0.55);
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease, visibility .22s;
  }
  .site-nav.is-open .site-nav__menu{transform:none; opacity:1; visibility:visible; pointer-events:auto;}
  .site-nav__menu .nav-link{font-size:16px; padding:14px 2px; border-bottom:1px solid var(--line-2); border-top:0;}
  .site-nav__menu .nav-link.is-active{color:var(--accent); border-bottom-color:var(--line-2);}
  .btn--cta-nav{margin-top:16px; text-align:center; padding:14px; font-size:15px;}
}

@media (max-width:600px){
  .process-grid,.portfolio-grid,.pages-grid{grid-template-columns:1fr;}
  .section-head{margin-bottom:40px;}
  .footer-top{grid-template-columns:1fr; gap:36px;}
  .hero__row{gap:28px;}
  .field-row{grid-template-columns:1fr; gap:0;}
}