/* Forma Tutti website: page layouts. Loads after tokens.css and components.css. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:var(--space-3) var(--space-4);background:var(--blue);color:var(--on-ink)}
.skip:focus{left:var(--space-4);top:var(--space-4)}
.wrap{max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--space-24) 0}
.section--paper{background:var(--paper)}
.section--tight-top{padding-top:0}
.muted{color:var(--stone)}
.ft-header__home img{display:block;height:var(--logo-height);width:auto}

/* Section heading row: heading left, link right, hairline under */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);padding-bottom:var(--space-4);border-bottom:var(--border-hairline) solid var(--rule);margin-bottom:var(--space-8)}
.sec-head h2{margin:0}

/* Page intro (inner pages) */
.intro{padding:var(--space-24) 0 var(--space-10)}
.intro__row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-12)}
.intro__text{display:flex;flex-direction:column;gap:var(--space-6);max-width:720px}
.intro__text h1,.intro__text p{margin:0}

/* Home: statement + values */
.statement{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16);align-items:end}
.statement p{margin:0}
.values{list-style:none;margin:0;padding:0;border-top:var(--border-hairline) solid var(--ink)}
.values li{display:flex;align-items:baseline;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:var(--border-hairline) solid var(--rule);font-size:20px;line-height:28px;font-weight:300}
.values .ft-label{width:40px;color:var(--stone)}

/* Services list (home and services page) */
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-8)}
.svc li{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) 0;border-bottom:var(--border-hairline) solid var(--rule)}
.svc__name{display:flex;align-items:baseline;gap:var(--space-4)}
.svc__name .ft-label{width:40px;flex:none;color:var(--stone)}
.svc__name h3{margin:0}
.svc p{margin:0 0 0 56px;color:var(--stone)}
.svc--two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Project grids */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
div.ft-projcard{cursor:default}
div.ft-projcard:hover .ft-projcard__media img{transform:none}
div.ft-projcard:hover .ft-projcard__name{text-decoration:none}
.ft-projcard__note{margin:0;color:var(--stone)}

/* Projects index: filter counts, featured project, photo strip */
.ft-filter__btn .count{margin-left:var(--space-2);font-family:var(--font-mono);font-weight:400;letter-spacing:0}
.feature{display:grid;grid-template-columns:minmax(0,824fr) minmax(0,440fr);gap:var(--space-12);margin-top:var(--space-12)}
.feature__media{display:block;aspect-ratio:824/560;overflow:hidden;background:var(--paper)}
.feature__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.feature__media:hover img{transform:scale(1.03)}
.feature__body{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-8)}
.feature__top{display:flex;flex-direction:column;gap:var(--space-4)}
.feature__top h2,.feature__top p{margin:0}
.feature__bottom{display:flex;flex-direction:column;gap:var(--space-8);align-items:flex-start}
.feature__bottom .ft-tblock{align-self:stretch}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;margin:var(--space-10) 0 var(--space-4)}
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3);list-style:none;margin:0;padding:0}
.strip a{display:flex;flex-direction:column;gap:10px;color:var(--stone);text-decoration:none}
.strip img{display:block;width:100%;aspect-ratio:209/150;object-fit:cover;background:var(--paper)}
.strip a:hover .ft-label,.strip a:focus-visible .ft-label{color:var(--ink)}
.strip a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[hidden]{display:none!important}

/* Project page */
.crumb{display:inline-flex;align-items:center;gap:10px;color:var(--stone);text-decoration:none}
.crumb:hover{color:var(--ink)}
.proj-head{padding:var(--space-16) 0 var(--space-10);display:flex;flex-direction:column;gap:var(--space-6)}
.proj-head__row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-16)}
.proj-head h1{margin:0}
.proj-head p{margin:0;max-width:520px}
.fig{margin:0;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;scroll-margin-top:var(--space-8)}
.fig img{display:block;width:100%;object-fit:cover;background:var(--paper)}
.fig figcaption{display:flex;gap:14px;color:var(--stone)}
.fig figcaption b{font-weight:500;color:var(--ink)}
.fig--wide img{aspect-ratio:1312/760}
.fig--tall img{aspect-ratio:644/820}
.fig--half img{aspect-ratio:644/430}
.gallery{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-20,80px)}
.proj-block{margin-top:var(--space-8)}
.next{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding-top:var(--space-8);border-top:var(--border-hairline) solid var(--rule)}
.next__link{display:inline-flex;align-items:center;gap:20px;color:var(--ink);text-decoration:none}
.next__link img{width:120px;height:80px;object-fit:cover;display:block}
.next__text{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.next__link:hover .ft-display-s{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* About */
.about-photo{aspect-ratio:1312/600;width:100%;object-fit:cover;object-position:50% 50%;display:block;background:var(--paper)}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16)}
.about-grid h2{margin:0}
.about-copy{display:flex;flex-direction:column;gap:var(--space-6)}
.about-copy p{margin:0}

/* Services page details strip */
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.details figure{margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.details img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper)}
.details figcaption{display:flex;gap:14px;color:var(--stone)}
.details figcaption b{font-weight:500;color:var(--ink)}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
.contact__aside{display:flex;flex-direction:column;gap:var(--space-6);position:sticky;top:var(--space-8)}
.contact__aside h1,.contact__aside p{margin:0}
.contact__panel{background:var(--paper);padding:var(--space-12)}
.form{display:flex;flex-direction:column;gap:var(--space-6)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.form__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.form__note{margin:0;color:var(--stone)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.thanks{padding:var(--space-32) 0;display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start;max-width:720px}
.thanks h1,.thanks p{margin:0}

/* Tablet */
@media (max-width:1119px){
  .wrap{padding:0 var(--gutter-tablet)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statement,.about-grid,.contact{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .contact__aside{position:static}
  .feature{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Mobile */
@media (max-width:767px){
  .wrap{padding:0 var(--gutter-mobile)}
  .section{padding:var(--space-16) 0}
  .intro{padding:var(--space-16) 0 var(--space-8)}
  .intro__row,.proj-head__row{flex-direction:column;align-items:flex-start;gap:var(--space-6)}
  .grid-4,.grid-3,.grid-2,.svc,.svc--two,.details{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__panel{padding:var(--space-6)}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .next{flex-direction:column;align-items:flex-start}
  .next__text{align-items:flex-start}
  .ft-tblock--row .ft-tblock__row{flex-basis:45%}
  .ft-hero__cell--end{margin-left:0}
}

/* Hero pause control (WCAG 2.2.2: moving content can be paused) */
.ft-hero__pause{margin:0 0 0 var(--space-2);padding:0;background:none;border:0;color:var(--sky);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ft-hero__pause:hover{color:var(--on-photo)}
.ft-hero__pause:focus-visible{outline:none;box-shadow:var(--focus-ring-on-ink)}
.intro__text .ft-btn,.about-copy .ft-btn{align-self:flex-start}
/* Footer content lines up with the page content */
.ft-footer__inner,.ft-footer__base-inner{max-width:calc(var(--container) + 2 * var(--gutter))}