/* 2026-11-07: Major compositional rebuild of three fictional website demos.
   Loaded after earlier styles so the approved showroom itself remains untouched. */

/* NORTHLINE — editorial, real-world service imagery instead of a repeated line-art plate */
.northline .nl-home-hero{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:auto auto;column-gap:5.3%;row-gap:0;
  padding:40px clamp(22px,6.3vw,105px) 0;max-width:1800px;margin:auto;align-items:center;
  background:#f0eee7;min-height:660px
}
.northline .nl-home-hero .nl-hero-content{align-self:center;padding:45px 0 75px}
.northline .nl-home-hero h1{font:500 clamp(58px,6.5vw,110px)/.93 'Playfair Display',Georgia,serif;letter-spacing:-.07em;max-width:690px;margin:32px 0 31px}
.northline .nl-home-hero .nl-hero-content>p{font-size:17px;line-height:1.7;color:#5c635a;max-width:440px}
.northline .nl-home-hero .nl-button{background:#283c32;color:#f6f5eb;padding:17px 23px;font-size:12px}
.northline .nl-home-hero .nl-hero-meta{margin-top:64px;font-size:11px;line-height:1.7;color:#697069;gap:24px}
.northline .nl-rebuilt-photo{min-width:0;height:615px;position:relative;margin:0;align-self:end;background:#dbd5c9;overflow:hidden}
.northline .nl-rebuilt-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:56% center;filter:saturate(.82) contrast(1.035)}
.northline .nl-rebuilt-photo:after{content:"";position:absolute;inset:36% 0 0;pointer-events:none;background:linear-gradient(transparent,#1b2622b8)}
.northline .nl-rebuilt-photo-tag{position:absolute;z-index:2;left:7%;bottom:13%;color:#fffaf0}
.northline .nl-rebuilt-photo-tag span{display:block;font:10px 'DM Mono',monospace;letter-spacing:.16em;margin-bottom:14px;color:#f6e5cf}
.northline .nl-rebuilt-photo-tag strong{font:500 clamp(25px,3vw,44px)/1.1 'Playfair Display',Georgia,serif;letter-spacing:-.04em}
.northline .nl-rebuilt-photo figcaption{position:absolute;left:7%;right:7%;bottom:5%;display:flex;justify-content:space-between;gap:15px;border-top:1px solid #ffffff7a;padding-top:14px;color:#f7f4ea;z-index:3;font:9px 'DM Mono',monospace;letter-spacing:.09em}
.northline .nl-home-hero .nl-service-ribbon{grid-column:1/-1;margin:0;margin-top:0;background:#f0eee7;border-top:1px solid #b9b9aa}
.northline .nl-contrast-band{padding-top:55px;padding-bottom:30px}
.northline .nl-contrast-head strong{font-size:clamp(47px,5.4vw,89px)}
.northline .nl-service-section{background:#e4e3d9}
.northline .nl-service-card{background:#f6f4ec}
@media(max-width:950px){
  .northline .nl-home-hero{grid-template-columns:1fr;min-height:0;padding:25px 28px 0;gap:0}
  .northline .nl-home-hero .nl-hero-content{padding:32px 0 47px}
  .northline .nl-home-hero h1{font-size:clamp(58px,8.7vw,85px);max-width:790px}
  .northline .nl-rebuilt-photo{height:min(75vw,540px)}
}
@media(max-width:650px){
  .northline .nl-home-hero{padding:12px 20px 0}
  .northline .nl-home-hero .nl-hero-content{padding:35px 0 35px}
  .northline .nl-home-hero h1{font-size:clamp(51px,12vw,70px);margin:24px 0 18px}
  .northline .nl-home-hero .nl-hero-content>p{font-size:15px}
  .northline .nl-home-hero .nl-hero-meta{margin-top:32px;font-size:10px}
  .northline .nl-rebuilt-photo{height:390px}
  .northline .nl-rebuilt-photo-tag strong{font-size:32px}
  .northline .nl-rebuilt-photo figcaption{font-size:8px}
  .northline .nl-service-ribbon{margin-top:0}
}

/* ATELIER / FORME — iconic full-width editorial image-left split hero */
.atelier .brand-header{height:96px;background:#f2eee7;border-bottom:1px solid #d9d2c8}
.atelier .at-hero{
  max-width:none;width:100%;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,54%) minmax(0,46%);grid-template-areas:"image copy";
  gap:0;align-items:stretch;min-height:700px
}
.atelier .at-hero-image{
  grid-area:image;position:relative;width:100%;height:700px;
  padding:0;margin:0;overflow:hidden;background:#d4d1c9
}
.atelier .at-hero-image img{width:100%;height:100%;object-fit:cover;object-position:55% center;filter:saturate(.7) contrast(1.01);display:block}
.atelier .at-hero-image:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#1117);pointer-events:none}
.atelier .at-hero-image figcaption{position:absolute;z-index:2;bottom:28px;left:42px;font:11px 'DM Mono',monospace;color:#fff8eb;letter-spacing:.13em}
.atelier .at-hero-image .image-index{color:#fdf9ed;z-index:2;position:absolute;right:35px;top:27px;font-size:22px}
.atelier .at-hero-copy{
  grid-area:copy;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:65px clamp(38px,7vw,130px);background:#eee9e2;min-width:0
}
.atelier .at-hero-copy .eyebrow{font-size:11px;letter-spacing:.12em;color:#806957}
.atelier .at-hero h1{font-size:clamp(73px,7.1vw,128px);line-height:.95;letter-spacing:-.075em;margin:49px 0 36px}
.atelier .at-hero h1 em{font-style:italic;color:#9e765b}
.atelier .at-hero-copy>p{font:18px/1.75 'Playfair Display',Georgia,serif;max-width:470px;color:#5d5b54}
.atelier .at-hero-copy .at-link{font:12px 'DM Mono',monospace;letter-spacing:.07em;margin-top:47px;min-width:85%;display:flex;justify-content:space-between}
.atelier .at-hero-copy .hero-note{font-size:10px;line-height:1.7;margin-top:75px;letter-spacing:.12em}
.atelier .at-statement{background:#e8e2d9;padding:100px 30px}
.atelier .at-statement h2{font-size:clamp(42px,5vw,72px)}
.atelier .at-services{padding-top:108px;padding-bottom:100px}
.atelier .at-material-story{padding-top:80px;padding-bottom:80px}
.atelier .at-work-grid figure{height:420px;box-shadow:none}
.atelier .at-work-grid .work-one figure{height:520px}
.atelier .at-work-grid .work-two figure{height:420px}
.atelier .at-work-grid .work-three figure{height:360px}
.atelier .at-work-grid figure img{transform:none!important;object-position:center;filter:saturate(.76)}
.atelier .at-work-grid .work-project:hover figure img{transform:scale(1.03)!important}
@media(max-width:940px){
  .atelier .at-hero{grid-template-columns:1fr;grid-template-areas:"image" "copy";min-height:0}
  .atelier .at-hero-image{height:min(67vw,540px)}
  .atelier .at-hero-copy{padding:58px 8vw 65px}
  .atelier .at-hero h1{font-size:clamp(70px,10vw,100px);margin:30px 0 23px}
  .atelier .at-hero-copy .hero-note{margin-top:40px}
}
@media(max-width:650px){
  .atelier .at-hero-image{height:390px}
  .atelier .at-hero-image figcaption{left:20px;bottom:18px;font-size:9px}
  .atelier .at-hero-copy{padding:45px 22px 55px}
  .atelier .at-hero h1{font-size:clamp(62px,13vw,82px)}
  .atelier .at-hero-copy>p{font-size:17px}
  .atelier .at-hero-copy .at-link{margin-top:26px}
  .atelier .at-statement{padding:60px 22px}
  .atelier .at-services{padding-top:58px;padding-bottom:55px}
  .atelier .at-work-grid figure,.atelier .at-work-grid .work-one figure,.atelier .at-work-grid .work-two figure,.atelier .at-work-grid .work-three figure{height:340px}
}

/* GOOD THINGS — strict two-column editorial hero; no typographic / mascot collisions */
.good-things .brand-header{background:#f4eee3;height:109px;border-bottom:1px solid #26221e}
.good-things .brand-header .brand-logo b{font-size:25px;line-height:.83}
.good-things .gt-headline-ticker{background:#1d1917;color:#fff8ef;min-height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}
.good-things .gt-headline-ticker span{font:900 clamp(15px,1.9vw,24px)/1 'Arial Black',Arial,sans-serif;letter-spacing:.02em}
.good-things .gt-hero{
  background:#f15c38;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.6fr);
  grid-template-rows:auto minmax(455px,1fr) auto;grid-template-areas:"head head" "headline face" "bottom bottom";
  min-height:680px;gap:0 20px;align-items:center;
  padding:45px clamp(28px,5vw,82px) 37px;overflow:hidden
}
.good-things .gt-hero-top{grid-area:head;font-size:12px;letter-spacing:.13em;align-self:start}
.good-things .gt-hero .gt-unordinary{
  grid-area:headline;position:relative;z-index:3;
  margin:0;max-width:none;white-space:nowrap;
  font:900 clamp(91px,10.4vw,165px)/.87 'Arial Black',Arial,sans-serif;
  letter-spacing:-.095em;align-self:center
}
.good-things .gt-hero .gt-unordinary i{font-style:normal;color:#fbf5e7}
.good-things .gt-signature-face{
  grid-area:face;position:relative;z-index:2;top:auto;right:auto;left:auto;bottom:auto;
  width:min(100%,360px);height:auto;aspect-ratio:1;
  justify-self:center;align-self:center;margin:10px 0;
  background:#ffe653;transform:rotate(-13deg);
  border-radius:50%;box-shadow:none;pointer-events:none
}
.good-things .gt-face-eye{width:23px;height:44px}
.good-things .gt-face-smile{border-bottom-width:19px}
.good-things .gt-hero-bottom{grid-area:bottom;display:flex;align-items:end;justify-content:space-between;gap:25px;z-index:5}
.good-things .gt-hero-bottom p{font-size:16px;line-height:1.48;letter-spacing:0}
.good-things .gt-hero-bottom>a{font-size:12px;min-width:130px;display:flex;justify-content:space-between}
.good-things .gt-hero .gt-star,.good-things .gt-hero .gt-small-type,.good-things .gt-hero .gt-circle,.good-things .gt-hero .gt-hero-edition{display:none}
.good-things .gt-studio-strip{background:#ffe653;color:#1a1816;padding:24px 5%;font:700 12px 'Arial Black',Arial,sans-serif}
.good-things .gt-studio-strip b{color:#171713}
.good-things .gt-intro{padding-top:100px;padding-bottom:100px}
.good-things .gt-intro h2{font-size:clamp(50px,5vw,76px)}
@media(max-width:1000px){
  .good-things .gt-hero{grid-template-columns:minmax(0,1fr) minmax(180px,.5fr);grid-template-rows:auto minmax(320px,1fr) auto;min-height:565px}
  .good-things .gt-hero .gt-unordinary{font-size:clamp(68px,10vw,100px)}
  .good-things .gt-signature-face{width:230px}
}
@media(max-width:760px){
  .good-things .brand-header{height:88px;background:#f4eee3}
  .good-things .gt-headline-ticker{min-height:39px}
  .good-things .gt-headline-ticker span{font-size:14px}
  .good-things .gt-hero{
    min-height:0;display:grid;grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;grid-template-areas:"head" "headline" "face" "bottom";
    gap:22px;padding:30px 20px 35px
  }
  .good-things .gt-hero-top{font-size:10px;line-height:1.5}
  .good-things .gt-hero .gt-unordinary{
    font-size:clamp(48px,12vw,85px);line-height:.87;margin:40px 0 0;
    white-space:nowrap;letter-spacing:-.11em
  }
  .good-things .gt-signature-face{width:210px;max-width:58vw;margin:0 6% 12px auto;justify-self:end;transform:rotate(-13deg)}
  .good-things .gt-face-eye{width:15px;height:27px}
  .good-things .gt-face-smile{border-bottom-width:12px}
  .good-things .gt-hero-bottom{margin-top:0;display:flex;align-items:end}
  .good-things .gt-hero-bottom p{font-size:12px;line-height:1.5}
  .good-things .gt-hero-bottom>a{font-size:10px;min-width:90px}
  .good-things .gt-studio-strip{padding:14px 20px;font-size:10px}
  .good-things .gt-intro{padding-top:50px;padding-bottom:50px}
}
@media(max-width:360px){
  .good-things .gt-hero .gt-unordinary{font-size:clamp(43px,12.3vw,49px)}
  .good-things .gt-signature-face{width:178px}
  .good-things .gt-hero-top{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .good-things .gt-signature-face,.atelier .at-hero-image img,.northline .nl-rebuilt-photo img{transition:none!important}
}