:root{--paper:#f7f5f0;--cream:#eeebe4;--white:#fffefa;--ink:#34352f;--muted:#77776d;--border:#dcd9d0;--olive:#747967}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.7}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;line-height:1.12}h1{font-size:clamp(3.5rem,6.5vw,7.1rem);letter-spacing:-.035em}h2{font-size:clamp(2.7rem,4.2vw,5rem);letter-spacing:-.025em}h3{font-size:2rem}.eyebrow{font-size:.68rem;letter-spacing:.2em;font-weight:600;line-height:1.5}.site-header{height:88px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:var(--paper);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border)}.wordmark{font-family:Georgia,serif;letter-spacing:.19em;font-size:1.7rem;white-space:nowrap}.wordmark span{display:block;font-family:'DM Sans',sans-serif;font-size:.55rem;letter-spacing:.3em;text-align:center;line-height:1.3}nav{display:flex;gap:30px;align-items:center}nav a,footer a{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}nav a:hover,.text-link:hover{color:var(--olive)}.nav-contact{border-bottom:1px solid;padding-bottom:5px}.menu-toggle{display:none}.hero{min-height:690px;display:grid;grid-template-columns:48% 52%;background:var(--cream)}.hero-copy{padding:12% 10% 10% 11%;align-self:center}.hero-copy>p:not(.eyebrow){max-width:440px;font-size:1rem;margin-bottom:32px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:white;padding:16px 23px;font-size:.7rem;font-weight:600;letter-spacing:.13em;transition:background .2s}.button:hover{background:var(--olive)}.button.outline{background:transparent;border:1px solid var(--ink);color:var(--ink)}.button.outline:hover{background:var(--ink);color:white}.video-placeholder,.visual-placeholder{background:#ddd9cf;color:#767469;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;font-size:.69rem;font-weight:600;letter-spacing:.17em;position:relative;overflow:hidden}.video-placeholder{min-height:540px;background:linear-gradient(145deg,#b9b8ae,#e5e0d7 65%,#c7c8bd)}.video-placeholder small{font-weight:300;letter-spacing:.05em;font-size:.8rem}.placeholder-mark{font-family:Georgia,serif;font-size:3.8rem;letter-spacing:-.06em;font-weight:400;color:#f8f6f0}.video-placeholder video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.section{padding:110px 7%}.intro{text-align:center;max-width:930px;margin:auto}.intro h2{margin:15px auto 25px}.intro>p:last-child{max-width:690px;margin:auto}.section-heading{margin-bottom:45px}.section-heading h2{margin-bottom:12px}.services{background:var(--white)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.service-card .visual-placeholder{height:310px;margin-bottom:27px}.service-card h3{font-size:2rem;margin:10px 0}.service-card p:last-child{max-width:370px}.center{text-align:center;margin-top:40px}.text-link{display:inline-block;font-size:.72rem;letter-spacing:.15em;font-weight:600;border-bottom:1px solid;padding-bottom:8px}.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:9%;align-items:center;background:var(--cream)}.feature .secondary{min-height:500px}.feature-copy p:not(.eyebrow){max-width:440px;margin-bottom:30px}.process{background:var(--white)}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.steps article{border-top:1px solid var(--border);padding-top:20px}.steps span{font-family:Georgia,serif;font-size:1.8rem;color:var(--olive)}.steps h3{font-size:1.6rem;margin:20px 0 10px}.steps p{font-size:.9rem}.fine-print{font-size:.74rem;color:var(--muted);margin-top:45px;max-width:700px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.visual-placeholder.tall{height:440px}.project h3{font-size:1.9rem;margin:18px 0}.project h3 span{float:right;font:1.2rem 'DM Sans',sans-serif}.about{background:var(--white);display:grid;grid-template-columns:.9fr 1fr;gap:10%;align-items:center}.portrait{min-height:550px}.about p:not(.eyebrow){max-width:490px}.contact{text-align:center;background:var(--cream)}.contact h2{margin:20px 0}.contact p:not(.eyebrow){margin-bottom:32px}footer{padding:65px 7% 35px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}footer>div{display:flex;gap:20px}footer p{width:100%;text-align:center;border-top:1px solid var(--border);padding-top:24px;color:var(--muted);font-size:.7rem}.portfolio-page{padding:85px 7%}.portfolio-page h1{font-size:clamp(3.3rem,6vw,6rem)}.portfolio-page section{padding:60px 0;border-top:1px solid var(--border)}.portfolio-page .portfolio-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.portfolio-gallery .visual-placeholder{height:380px}.back-link{font-size:.75rem;letter-spacing:.12em}.portfolio-note{max-width:620px;color:var(--muted)}@media(max-width:1000px){nav{gap:14px}.hero-copy{padding:10% 8%}.cards,.portfolio-grid{gap:15px}.visual-placeholder.tall{height:320px}}@media(max-width:760px){.site-header{height:75px}.wordmark{font-size:1.35rem}.menu-toggle{display:block;background:none;border:0;font-size:.75rem;letter-spacing:.1em;color:var(--ink)}nav{display:none;position:absolute;top:75px;left:0;right:0;background:var(--paper);padding:22px 7%;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--border)}nav.open{display:flex}.hero,.feature,.about{grid-template-columns:1fr}.hero-copy{padding:75px 7%}.hero{min-height:0}.video-placeholder{min-height:430px}.section{padding:75px 7%}.cards,.portfolio-grid,.steps,.portfolio-page .portfolio-gallery{grid-template-columns:1fr}.service-card .visual-placeholder{height:300px}.feature .secondary{min-height:360px}.portrait{min-height:370px}footer{flex-direction:column;text-align:center}footer>div{justify-content:center;flex-wrap:wrap}.portfolio-page{padding:55px 7%}}

/* Jennifer Terry portrait: retains original About section grid */
.portrait-photo{width:100%;height:100%;min-height:520px;overflow:hidden;background:#dedbd3}
.portrait-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 37%}
@media(max-width:700px){.portrait-photo{min-height:380px;max-height:520px}}

/* Instagram link in contact section */
.instagram-contact{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;margin:25px auto 0;color:inherit;text-decoration:none;font-size:12px;letter-spacing:.17em;transition:opacity .2s ease}.instagram-contact:hover{opacity:.6}.instagram-contact svg{flex-shrink:0}

/* Refined vertical rhythm: remove excessive blank bands on desktop */
@media (min-width: 761px) {
  .section { padding-top: 66px; padding-bottom: 66px; }
  .intro.section { padding-top: 68px; padding-bottom: 65px; }
  .services.section { padding-top: 58px; padding-bottom: 70px; }
  .process.section { padding-top: 65px; padding-bottom: 44px; }
  .process .fine-print { margin-top: 27px; margin-bottom: 0; }
  .portfolio.section { padding-top: 57px; padding-bottom: 70px; }
  .feature.section { padding-top: 68px; padding-bottom: 68px; }
}
@media (max-width: 760px) {
  .section { padding-top: 48px; padding-bottom: 48px; }
  .intro.section { padding-top: 52px; padding-bottom: 48px; }
  .services.section { padding-top: 45px; }
  .process.section { padding-bottom: 35px; }
  .process .fine-print { margin-top: 22px; margin-bottom: 0; }
  .portfolio.section { padding-top: 42px; }
}

/* Liminal brand symbol, consistently shown in header and footer */
.brand-lockup{display:inline-flex;align-items:center;gap:13px;flex-shrink:0;text-decoration:none}
.brand-symbol{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.brand-lockup .wordmark{display:block;line-height:1.25}
@media(max-width:760px){.brand-symbol{width:32px;height:32px}.brand-lockup{gap:8px}}
/* Final section spacing: bring paragraph and next heading visibly closer */
@media(min-width:761px){.intro.section{padding-bottom:24px}.services.section{padding-top:28px}.process.section{padding-bottom:28px}.portfolio.section{padding-top:34px}}
@media(max-width:760px){.intro.section{padding-bottom:18px}.services.section{padding-top:24px}.process.section{padding-bottom:24px}.portfolio.section{padding-top:26px}}
/* Accessibility: keyboard navigation, contrast, and reduced motion */
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;background:#34352f;color:#fff;padding:10px 16px;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid #354f68;outline-offset:4px}
:root{--muted:#595b53;--olive:#4f5944}
.video-placeholder,.visual-placeholder{color:#4d4f47}
.video-placeholder small{color:#41443e;font-weight:500}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Featured work: mixed video and image slideshow, contained in original hero layout */
.hero-carousel{position:relative;min-width:0;min-height:690px;background:#d4d0c7;overflow:hidden;isolation:isolate}
.hero-carousel-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;visibility:hidden;transition:opacity .85s ease,visibility .85s ease}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero-slide img,.hero-slide video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.carousel-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:12px;padding:9px 13px;background:rgba(247,245,240,.91);border:1px solid rgba(52,53,47,.15);border-radius:40px;box-shadow:0 4px 22px rgba(0,0,0,.08)}
.carousel-controls button{cursor:pointer;border:0;background:transparent;color:#34352f;font-family:'DM Sans',sans-serif;min-width:29px;min-height:30px;display:inline-flex;align-items:center;justify-content:center}
.carousel-controls button:focus-visible{outline:2px solid #354f68;outline-offset:2px}
.carousel-arrow{font-size:20px}
.carousel-dots{display:flex;align-items:center;gap:7px}
.carousel-dots .carousel-dot{min-width:16px;width:16px;height:30px;position:relative}
.carousel-dot::after{content:'';width:6px;height:6px;background:#85867d;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:background .2s,scale .2s}
.carousel-dot.is-active::after{background:#34352f;scale:1.45}
.carousel-toggle{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){.hero-carousel{min-height:440px;height:58vh;max-height:680px}.carousel-controls{bottom:15px;gap:6px;padding:6px 9px}.carousel-dots{gap:2px}.carousel-toggle{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* Unified hero palette; every project has the same frame, with no cropping. */
.hero,.hero-carousel,.hero-carousel-slides,.hero-slide{background:var(--cream)}
.hero-carousel{overflow:hidden;min-height:690px}
.hero-slide{display:flex;align-items:center;justify-content:center}
.hero-slide img,.hero-slide video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent}
.carousel-controls{display:none!important}
@media(max-width:760px){.hero-carousel{min-height:300px;height:55vw;max-height:460px}}

/* Full-bleed editorial hero media with a gentle warm tint. */
.hero{grid-template-columns:48% 52%;align-items:stretch}
.hero-carousel{height:auto;min-height:690px;background:var(--cream)}
.hero-slide{display:block;background:transparent}
.hero-slide img,.hero-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;background:transparent}
.hero-carousel::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(91,76,58,.105);pointer-events:none}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-carousel{height:60vh;min-height:390px;max-height:680px}}

/* Real service examples: consistent card proportions without distortion */
.service-card .service-image{width:100%;height:310px;margin-bottom:27px;overflow:hidden;background:var(--cream)}
.service-card .service-image img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
@media(max-width:760px){.service-card .service-image{height:300px}}

/* Services: fill each entire image box without letterboxing. */
.service-card .service-image img {
  object-fit: cover;
  object-position: center center;
}

/* Design idea slideshow: full media frame with consistent size */
.idea-carousel{position:relative;width:100%;aspect-ratio: 1.35;min-height:360px;overflow:hidden;background:var(--cream)}
.idea-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .95s ease-in-out,visibility 0s linear .95s;pointer-events:none}
.idea-slide.is-active{transition:opacity .95s ease-in-out,visibility 0s linear 0s}
.idea-slide.is-active{opacity:1;visibility:visible}
.idea-slide img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.idea-carousel{min-height:270px;aspect-ratio:1.35}}
@media(prefers-reduced-motion:reduce){.idea-slide{transition:none}}

/* Portfolio project covers and individual project galleries */
.portfolio-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.portfolio-project-card {min-width:0;}
.portfolio-cover {display:block;width:100%;height:auto;aspect-ratio:1.18;object-fit:cover;background:#dedbd4;}
.portfolio-all-projects {margin-top:42px;}
.project-detail-page,.project-detail-page main,.project-detail-page header,.project-detail-page footer {background:#fff !important;}
.project-detail-header {display:flex;align-items:center;justify-content:space-between;padding:20px clamp(22px,6vw,100px);border-bottom:1px solid #e8e8e8;gap:20px;}
.project-detail-main {max-width:1500px;margin:auto;padding:70px clamp(22px,6vw,100px) 110px;}
.project-detail-main h1 {margin:12px 0 22px;}
.project-jump-links {display:flex;gap:22px;flex-wrap:wrap;margin-bottom:72px;font-size:13px;letter-spacing:.05em;}
.project-jump-links a {text-decoration:underline;text-underline-offset:5px;}
.project-gallery-section {margin:0 0 90px;scroll-margin-top:35px;}
.project-gallery-section h2 {margin:0 0 26px;font-size:clamp(29px,3.5vw,48px);}
.project-image-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.gallery-figure {margin:0;min-width:0;}
.gallery-figure img {display:block;width:100%;height:auto;object-fit:contain;}
.project-bottom-back {display:inline-block;margin-top:15px;}
@media(max-width:700px){.portfolio-grid,.project-image-grid{grid-template-columns:1fr;}.project-detail-main{padding-top:45px;}.project-jump-links{margin-bottom:45px;}.project-gallery-section{margin-bottom:60px;}}

/* Four portfolio covers across on desktop; responsive at smaller widths. */
.portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.portfolio-cover{aspect-ratio:1 / 1.08;}
.portfolio-project-card h3{font-size:clamp(1.45rem,2vw,1.9rem);}
@media(max-width:950px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}}
@media(max-width:560px){.portfolio-grid{grid-template-columns:1fr;}}

/* Soft crossfade between homepage videos. Keep outgoing frame visible as incoming video fades in. */
.hero-carousel .hero-slide{visibility:visible;opacity:0;z-index:0;pointer-events:none;transition:opacity 1.4s ease-in-out!important;}
.hero-carousel .hero-slide.is-active{visibility:visible;opacity:1;z-index:1;}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-slide{transition:none!important;}}

/* Smooth six-video transitions. */
.hero-slide{transition:opacity .95s ease,visibility .95s ease;}
.hero-slide.is-active{visibility:visible;opacity:1;}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none;}}

/* Dedicated Terms of Service page; existing site styles remain untouched. */
.terms-page{background:#f8f7f4;color:#363531;}
.terms-header{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,5vw,80px);border-bottom:1px solid #e1ded8;gap:20px;}
.terms-header .brand-lockup{color:inherit;text-decoration:none;}
.terms-back{font-size:12px;letter-spacing:.12em;text-decoration:none;color:inherit;}
.terms-main{max-width:920px;margin:0 auto;padding:85px 26px 110px;}
.terms-main>h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(45px,6vw,76px);line-height:1.12;margin:16px 0 45px;}
.terms-content{max-width:780px;font-size:16px;line-height:1.8;}
.terms-content h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(28px,3vw,37px);line-height:1.25;margin:46px 0 15px;}
.terms-content h3{font-size:19px;font-weight:600;line-height:1.4;margin:32px 0 12px;}
.terms-content p{margin:0 0 16px;}
.terms-content .terms-bullet{padding-left:28px;position:relative;margin-bottom:8px;}
.terms-content .terms-bullet:before{content:'•';position:absolute;left:10px;}
.terms-footer{display:flex;justify-content:center;align-items:center;gap:25px;flex-wrap:wrap;padding:36px 20px;border-top:1px solid #e1ded8;}
.terms-footer a{color:inherit;text-decoration:underline;text-underline-offset:4px;}
.terms-footer p{width:100%;text-align:center;margin:0;}
/* Discrete legal link on the very bottom of every existing page. */
footer .footer-legal-link{display:block;width:100%;text-align:center;margin:4px auto 0;font-size:13px;letter-spacing:.02em;text-decoration:underline;text-underline-offset:4px;color:inherit;}
footer .footer-legal-link:hover,footer .footer-legal-link:focus-visible{opacity:.7;}

/* Keep all link arrows as monochrome icons on mobile and desktop. */
.arrow-icon{display:inline-block;vertical-align:-.13em;flex:none;color:inherit;stroke:currentColor} .button .arrow-icon{margin-left:.4em}

/* Mobile only: feature heading above the slideshow, with paragraphs immediately below. */
@media (max-width:760px){
  .feature.section{display:flex;flex-direction:column;align-items:stretch;gap:18px;}
  .feature-copy{display:contents;}
  .feature-copy h2{order:0;margin:0 0 2px;}
  .feature .idea-carousel{order:1;margin:0;min-height:0;}
  .feature-copy p{order:2;margin:0 0 12px;max-width:none!important;}
  .feature-copy p:last-child{margin-bottom:0;}
}

/* Mobile-only swipeable homepage portfolio; desktop remains unchanged. */
@media(max-width:560px){
  #portfolio .portfolio-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:2px 0 12px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;}
  #portfolio .portfolio-project-card{display:block;flex:0 0 85%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;}
  #portfolio .portfolio-cover{width:100%;aspect-ratio:1.18;object-fit:cover;}
  #portfolio .portfolio-swipe-hint{font-size:0.78rem;letter-spacing:.06em;margin:12px 0 0;color:var(--muted);text-align:center;}
}
@media(min-width:561px){#portfolio .portfolio-swipe-hint{display:none;}}

/* Mobile-only editorial ordering: About heading, portrait, copy and CTA. */
@media (max-width:760px){
  #about.about{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  #about.about > div:not(.portrait-photo){display:contents;}
  #about.about .eyebrow{order:0;margin:0 0 18px;}
  #about.about h2{order:1;margin:0 0 28px;}
  #about.about .portrait-photo{order:2;width:100%;margin:0 0 30px;min-height:0;}
  #about.about .portrait-photo img{display:block;width:100%;height:auto;}
  #about.about p:not(.eyebrow){order:3;max-width:none;margin:0 0 24px;}
  #about.about .text-link{order:4;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;position:relative;}
  #about.about{padding-bottom:72px;}
  #contact.contact{clear:both;}
  .feature-copy h2{font-size:clamp(42px,10.5vw,62px);line-height:1.08;letter-spacing:-.035em;white-space:normal;text-wrap:balance;}
}

/* Align the feature heading to the left on phones; retain desktop layout. */
@media (max-width:760px){.feature-copy h2{text-align:left;align-self:stretch;}}

/* Desktop only: keep the feature headline on one line within its text column. */
@media (min-width:761px){
  .feature-copy h2{font-size:clamp(30px,3.05vw,57px);letter-spacing:-.035em;white-space:nowrap;text-wrap:nowrap;}
}

/* Homepage header visually joins the hero; other pages retain their original header. */
@media (min-width:761px){body:has(main #home) > .site-header{background:var(--cream);border-bottom-color:transparent;}}

/* Mobile-only: consistent centered editorial alignment throughout homepage.
   Desktop rules and header navigation remain untouched. */
@media (max-width:760px) {
  body:has(main #home) main .hero-copy,
  body:has(main #home) main .intro,
  body:has(main #home) main .services,
  body:has(main #home) main .feature,
  body:has(main #home) main .process,
  body:has(main #home) main .portfolio,
  body:has(main #home) main .about,
  body:has(main #home) main .contact { text-align:center; }
  body:has(main #home) main .feature-copy h2 { text-align:center; }
  body:has(main #home) main .feature-copy p,
  body:has(main #home) main .about p:not(.eyebrow),
  body:has(main #home) main .service-card p { margin-left:auto; margin-right:auto; }
  body:has(main #home) main .about .text-link { align-self:center!important; }
  body:has(main #home) main .steps article { text-align:center; }
  body:has(main #home) main .section-heading { text-align:center; }
  body:has(main #home) main .service-card,
  body:has(main #home) main .portfolio-project-card { text-align:center; }
}

/* Portfolio titles: name and arrow together at the left, on every screen. */
.portfolio-project-card h3 {text-align:left;display:flex;align-items:center;justify-content:flex-start;gap:10px;}
.portfolio-project-card h3 span {float:none;display:inline-flex;align-items:center;line-height:1;}

/* Mobile only: keep the full feature headline on a single, prominent line. */
@media (max-width:760px) {
  body:has(main #home) main .feature-copy h2 {
    font-size:clamp(23px,7.5vw,39px);
    line-height:1.15;
    letter-spacing:-.045em;
    white-space:nowrap;
    text-wrap:nowrap;
    text-align:center;
    width:100%;
  }
}

/* Homepage portfolio: horizontal swipe on desktop and mobile, keeping existing card styling. */
@media (min-width:561px) {
  #portfolio .portfolio-grid {
    display:flex;
    grid-template-columns:none;
    gap:22px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    padding:2px 0 16px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
  }
  #portfolio .portfolio-project-card {
    display:block;
    flex:0 0 calc((100% - 66px)/4);
    min-width:0;
    scroll-snap-align:start;
  }
}
@media (min-width:561px) and (max-width:950px) {
  #portfolio .portfolio-project-card {flex-basis:calc((100% - 20px)/2);}
}