/* =====================================================================
   Jackie Fyfe Interiors: Home
   Built from Figma "JFS Website" (node 1:119, 1440px desktop frame)
   ===================================================================== */

/* ---------- Fonts ----------
   Design font for the script links ("View all projects >", "Learn more >") is
   "Milkshake Script" (commercial, awaited from client). Save it as
   assets/fonts/MilkshakeScript.woff2 (+ .woff optional) and it is used automatically;
   main.js then adds .has-milkshake to <html> to switch to the Figma line-height.
   Until then Sacramento (self-hosted) is shown, size-adjusted to Figma's width.
   Note: the "Milkshake" files in assets/fonts are a different typeface, not used. */
@font-face{
  font-family:"Milkshake Script";
  src:local("Milkshake Script"),local("MilkshakeScript-Regular"),
      url("../fonts/MilkshakeScript.woff2") format("woff2"),
      url("../fonts/MilkshakeScript.woff") format("woff");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JFS Script Fallback";
  src:url("../fonts/sacramento.woff2") format("woff2");
  size-adjust:130%;
  font-display:swap;
}
/* Google's Work Sans "latin" subset has no U+2192, so "→" fell back to Arial.
   This 1.5 KB subset supplies Work Sans' own arrow glyph only. */
@font-face{
  font-family:"Work Sans Arrow";
  src:url("../fonts/worksans-500-arrow.ttf") format("truetype");
  font-weight:500;
  unicode-range:U+2192;
  font-display:swap;
}

/* ---------- Design tokens (Figma styles) ---------- */
:root{
  --off-white:#FAF9F6;     /* OFF WHITE */
  --taupe:#A48E7E;         /* TAUPE */
  --black:#231F20;         /* BLACK */
  --taupe-light:#AA9A8E;   /* project names, script links */
  --blush-line:#F2E9E8;    /* button border, divider lines */
  --logo-grey:#C9BCB3;     /* client logos, team icon */
  --muted:#898989;         /* "Website by" */
  --white:#FFFFFF;

  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Work Sans Arrow","Work Sans",Arial,sans-serif;
  --f-script:"Milkshake Script","JFS Script Fallback",cursive;

  /* Content is 1240px wide (Figma x 100 → 1340). Container = content + 2 × gutter.
     Same 20px gutter on every screen; at 1440px the content starts at x 100 like Figma. */
  --content:1240px;
  --gutter:20px;
  --container:calc(var(--content) + 2 * var(--gutter)); /* 1280px */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--off-white);color:#000;font-family:var(--f-body);font-weight:300;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,blockquote{margin:0}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Type presets ---------- */
.t-display{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:34px;line-height:45px;letter-spacing:-.34px;color:var(--taupe)}
.t-body{font-family:var(--f-body);font-weight:300;font-size:14px;line-height:22px;color:#000}
.t-label{font-family:var(--f-body);font-weight:500;font-size:12px;line-height:14px;letter-spacing:1.2px;color:var(--black);text-transform:uppercase}
/* Browsers add letter-spacing after the last glyph too; Figma does not.
   Compensate so tracked labels sit exactly where Figma places them. */
.ls-center{padding-left:1.2px}
.ls-right{margin-right:-1.2px}
.t-script{font-family:var(--f-script);font-weight:400;font-size:29px;line-height:40px;padding-top:8px;color:var(--taupe-light);transition:color .4s ease,transform .4s ease;display:inline-block}
.t-script:hover{color:var(--taupe);transform:translateX(4px)}
/* real Milkshake Script loaded: Figma text box is 72px tall, no fallback nudge */
.has-milkshake .t-script{line-height:72px;padding-top:0}

/* ---------- Logo (two SVG parts, positioned as in Figma) ---------- */
.logo{position:relative;display:block;flex:none;width:271px;height:95px;transform-origin:left top;transition:transform .4s ease}
.logo__wordmark{position:absolute;left:0;top:0;width:271px;height:74.0027px}
.logo__interiors{position:absolute;left:81.46px;top:85.81px;width:108.029px;height:9.18632px}
.logo--footer{width:181px;height:63px}
.logo--footer .logo__wordmark{width:181px;height:49.0755px}
.logo--footer .logo__interiors{left:54.41px;top:56.91px;width:72.1524px;height:6.09198px}

/* =====================================================================
   HEADER: transparent over hero, becomes sticky glass bar on scroll
   (behaviour copied from sundayagency.com.au: .is-fixed after 10px)
   ===================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:999;padding-top:44px;padding-bottom:20px;transition:all .4s ease}
.site-header__in{display:flex;align-items:flex-start;justify-content:space-between}
.nav{display:flex;gap:20px;margin-top:24px;margin-right:-7px} /* nav text top = 68px in Figma */
.nav__link{width:var(--w);text-align:center;font-weight:500;font-size:12px;line-height:14px;letter-spacing:1.2px;color:var(--black);position:relative;transition:color .4s ease}
.nav__link::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .4s ease,left .4s ease}
.nav__link:hover{color:var(--taupe)}
.nav__link:hover::after{left:15%;width:70%}

.site-header.is-fixed{padding-top:14px;padding-bottom:14px;background:rgba(250,249,246,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.05);animation:headerReveal .5s ease}
.site-header.is-fixed .logo{transform:scale(.6);margin-bottom:-38px} /* 95px -> 57px */
.site-header.is-fixed .nav{margin-top:21px}
@keyframes headerReveal{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.nav-toggle{display:none;width:44px;height:44px;border:0;background:none;padding:12px 10px;cursor:pointer;position:relative;z-index:2}
.nav-toggle span{display:block;height:1px;background:var(--black);transition:transform .4s ease,opacity .4s ease}
.nav-toggle span+span{margin-top:8px}
.nav-open .nav-toggle span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav-open .nav-toggle span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* =====================================================================
   HERO  (1440 x 942)
   ===================================================================== */
.hero{position:relative;min-height:942px;overflow:hidden;background:#e9e4dc}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* =====================================================================
   INTRODUCTION  (h 309, bg off-white)
   ===================================================================== */
.intro{background:var(--off-white);min-height:309px;text-align:center;padding-top:79px}
.intro__title{max-width:696px;margin:0 auto}
.intro__text{max-width:562px;margin:29px auto 0}

/* =====================================================================
   RECENT PROJECTS  (h 882)
   ===================================================================== */
.recent{background:var(--off-white);min-height:882px;padding-top:38px}
.recent .container{display:flex;flex-direction:column}
.recent__label{color:#000}
.recent__grid{display:grid;grid-template-columns:repeat(3,388px);justify-content:space-between;margin-top:30px}
.card{display:block}
.card__media{display:block;position:relative;height:535px;overflow:hidden;background:#ece7e0}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
/* Oakrind Rise: custom crop from Figma (h 112.77%, w 103.72%, left -2.81%, top -11.59%) */
.card__media--oakrind img{inset:auto;left:-2.81%;top:-11.59%;width:103.72%;height:112.77%;max-width:none;object-fit:fill}
.card:hover .card__media img{transform:scale(1.04)}
.card__name{display:block;margin-top:21px;color:var(--taupe-light);transition:color .4s ease}
.card:hover .card__name{color:var(--taupe)}
.recent__all{align-self:flex-end;margin-top:63px}

/* =====================================================================
   MEET THE TEAM  (h 756, bg white, image 720 x 800 clipped)
   ===================================================================== */
/* Height scales with the photo column (720:756) so the Figma crop stays identical and
   always fills the frame; exactly 756px at 1440. */
.team{background:var(--white);overflow:hidden;display:grid;grid-template-columns:50% 50%;max-width:none}
.team__media{position:relative;aspect-ratio:720/756;overflow:hidden}
/* crop from Figma (720×800 frame): w 105.86%, left -3.35%, top -46.13% (= -369px = -51.25% of width).
   Height keeps Figma's ratio (762.2 × 1144.6) at every width instead of a fixed %; margin-top % is relative to width. */
.team__media img{position:absolute;left:-3.35%;top:0;margin-top:-51.25%;width:105.86%;height:auto;aspect-ratio:762.2/1144.6;max-width:none}
.team__copy{padding:110px 0 0 67px;display:flex;flex-direction:column;align-items:flex-start}
.team__icon{width:48px;height:38px}
.team__title{width:321px;line-height:40px;margin-top:54px}
.team__title strong{font-weight:700}
.team__text{width:380px;margin-top:39px;min-height:183px}
.team__text p+p{margin-top:22px}
.team__more{margin-top:16px}

/* =====================================================================
   SERVICES  (h 531)
   ===================================================================== */
.services{background:var(--off-white);min-height:531px;padding-top:97px;text-align:center}
.services__title{max-width:642px;margin:0 auto}
.services__grid{display:grid;grid-template-columns:repeat(3,357px);justify-content:center;margin-top:62px}
.service{display:flex;flex-direction:column;align-items:center}
.service__name{width:278px}
.service__text{width:276px;min-height:100px;margin-top:40px}
.service--wide .service__text{width:285px}
/* Figma: this button sits at x 1002 (4px left of the column centre) while its label stays at centre 1077 */
@media (min-width:1025px){ .service--wide .btn-pill{margin-left:-8px;padding-left:9.2px} }
.btn-pill{display:inline-flex;align-items:center;justify-content:center;width:142px;height:44px;margin-top:25px;border:1px solid var(--blush-line);border-radius:100px;color:var(--taupe);transition:background .4s ease,color .4s ease,border-color .4s ease}
.btn-pill:hover{background:var(--taupe);border-color:var(--taupe);color:var(--white)}

/* =====================================================================
   FEATURED PROJECT  (h 890, bg white)
   ===================================================================== */
.featured{background:var(--white);min-height:890px;padding-top:95px}
.featured__strip{display:grid;grid-template-columns:413fr 414fr 413fr;height:634px;overflow:hidden}
.featured__strip img{width:100%;height:100%;object-fit:cover}
.featured__bar{display:flex;justify-content:space-between;align-items:flex-start;margin-top:59px}
.featured__title{width:484px}
.featured__more{position:relative;margin-top:16px;text-align:right;transition:color .4s ease}
.featured__more img{position:absolute;right:14.2px;top:32px;width:78px;height:1px;transition:width .4s ease}
.featured__more:hover{color:var(--taupe)}
.featured__more:hover img{width:96px}

/* =====================================================================
   RECENT CLIENTS  (h 356, bg white)
   ===================================================================== */
.clients{background:var(--white);min-height:356px}
.clients__in{display:grid;grid-template-columns:621px 1fr}
.clients__quote{padding-top:150px;margin-left:-1px}
.clients__quote p{width:493px;font-family:var(--f-body);font-style:italic;font-weight:300;font-size:14px;line-height:22px;color:var(--taupe)}
.clients__quote cite{font-family:var(--f-display);font-style:italic;font-weight:400}
.clients__logos-wrap{position:relative;height:356px}
.clients__label{position:absolute;left:176px;top:63px;width:263px;text-align:center}
.clients__line{position:absolute;left:269px;top:101px;width:78px;height:1px}
.clients__logos{position:absolute;left:0;top:155px;width:586px;height:75px}
.clients__logos img{position:absolute}
.logo-au{left:0;top:11.2px;width:165.697px;height:63.7981px}
.logo-mq{left:216.4px;top:19.68px;width:173.053px;height:33.4829px}
.logo-amp{left:439.54px;top:0;width:146.451px;height:64.2746px}

/* =====================================================================
   FOOTER  (h 332, bg off-white): absolute layout = Figma positions.
   x offsets are measured from the content edge (Figma x − 100) and scale
   with the content width, so they are exact at 1240px and stay in proportion below.
   ===================================================================== */
.footer{background:var(--off-white);min-height:332px}
.footer__in{position:relative;min-height:332px;--cw:calc(100% - 2 * var(--gutter))}
.footer__brand{position:absolute;left:var(--gutter);top:68px}
.footer__tagline{margin-top:29px;width:484px;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:20px;line-height:27px;letter-spacing:-.2px;color:var(--black)}
.footer__legal{margin-top:15px;width:334px;font-size:10px;line-height:16px;font-weight:300;color:var(--black)}
.footer__legal .muted{color:var(--muted)}
.footer__nav{position:absolute;left:calc(var(--gutter) + var(--cw) * 484 / 1240);top:163px;display:flex;flex-direction:column;gap:5px}
.footer__nav a,.footer__social a{display:block;width:93px;font-weight:500;font-size:12px;line-height:14px;letter-spacing:1.2px;color:var(--black);transition:color .4s ease}
.footer__nav a:hover,.footer__social a:hover{color:var(--taupe)}
.footer__social{position:absolute;left:calc(var(--gutter) + var(--cw) * 649 / 1240);top:163px}
.footer__ack{position:absolute;right:var(--gutter);top:161px;width:337px;font-size:10px;line-height:16px;font-weight:300;color:var(--black)} /* x 1003 = 1340 − 337 */
.footer__icon{position:absolute;right:var(--gutter);top:67px;width:48px;height:38px} /* x 1292 = 1340 − 48 */

/* =====================================================================
   RESPONSIVE: Figma has desktop only; layouts below keep the same
   tokens and proportions for laptop / tablet / mobile.
   ===================================================================== */
@media (min-width:1441px){
  .team{grid-template-columns:1fr 1fr;height:756px}
  .team__media{aspect-ratio:auto;height:800px}
}

/* Laptop: below 1280px the 1240px content no longer fits, so fixed widths become fluid */
@media (max-width:1279px){
  /* text column can be taller than the photo ratio here: photo box stretches to the row and the photo covers it */
  .team__media{aspect-ratio:auto;min-height:calc(50vw * 756 / 720)}
  .team__media img{left:0;top:0;margin-top:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 90%}
  .recent{min-height:0;padding-bottom:95px}
  .recent__grid{grid-template-columns:repeat(3,1fr);gap:38px}
  .card__media{height:auto;aspect-ratio:388/535}
  .services{min-height:0;padding-bottom:104px}
  .services__grid{grid-template-columns:repeat(3,minmax(0,357px))}
  .featured{min-height:0;padding-bottom:72px}
  .featured__strip{height:auto;aspect-ratio:1240/634}
  .clients{min-height:0}
  .clients__in{grid-template-columns:minmax(0,1fr) 586px;gap:40px}
  .clients__quote p{width:auto;max-width:493px}
  .footer__ack{width:300px}
}

/* Tablet */
@media (max-width:1024px){
  .br-d{display:none}
  .site-header{padding-top:28px}
  .logo{transform:scale(.72)}
  .site-header .logo{margin-bottom:-27px}
  .nav-toggle{display:block}
  .nav{position:fixed;inset:0;margin:0;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:var(--off-white);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}
  .nav__link{width:auto;font-size:14px;line-height:18px;letter-spacing:2px}
  .nav-open .nav{opacity:1;visibility:visible}
  /* blur/transform on the header would trap the fixed overlay inside it */
  .nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;transform:none;background:transparent;box-shadow:none}
  .site-header.is-fixed .logo{transform:scale(.5)}
  .site-header.is-fixed .logo{margin-bottom:-47px}
  .site-header.is-fixed .nav{margin-top:0}

  .hero{width:100%;height:auto;aspect-ratio:1440/942;min-height:520px}
  .intro{min-height:0;padding:72px 0 64px}
  .recent{padding-top:24px;padding-bottom:72px}
  .recent__grid{gap:20px}
  .recent__all{margin-top:40px}

  .team{height:auto;grid-template-columns:1fr}
  .team__media{height:auto;aspect-ratio:720/756}
  .team__copy{padding:64px var(--gutter) 72px}
  .team__title{margin-top:32px}
  .team__text{width:auto;max-width:520px;margin-top:28px;min-height:0}

  .services{padding:72px 0}
  .services__grid{grid-template-columns:1fr;gap:56px;margin-top:48px}
  .service__text{min-height:0;margin-top:24px}

  .featured{padding-top:64px}
  .featured__bar{flex-direction:column;gap:20px;margin-top:32px}
  .featured__title{width:auto}
  .featured__more{margin-top:0;align-self:flex-end}

  .clients{padding:64px 0}
  .clients__in{grid-template-columns:minmax(0,1fr);gap:56px}
  .clients__quote{padding-top:0;margin-left:0}
  .clients__logos-wrap{height:auto;display:flex;flex-direction:column;align-items:center;gap:24px}
  .clients__label,.clients__line{position:static}
  .clients__line{margin-top:-8px}
  .clients__logos{position:relative;left:auto;top:auto;width:586px;max-width:100%;height:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .clients__logos img{position:static;width:auto;max-width:30%;height:auto}

  .footer{min-height:0}
  .footer__in{min-height:0;padding-top:56px;padding-bottom:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px 24px}
  .footer__brand,.footer__nav,.footer__social,.footer__ack,.footer__icon{position:static}
  .footer__brand{grid-column:1 / -1}
  .footer__tagline{width:auto}
  .footer__ack{width:auto;grid-column:1 / -1;max-width:420px}
  .footer__icon{grid-column:1 / -1}
}

/* Mobile */
@media (max-width:767px){
  .site-header{padding-top:20px;padding-bottom:12px}
  .logo,.site-header.is-fixed .logo{transform:scale(.55)}
  .site-header .logo,.site-header.is-fixed .logo{margin-bottom:-43px}
  .site-header.is-fixed{padding-top:12px;padding-bottom:12px}

  .t-display{font-size:28px;line-height:36px;letter-spacing:-.28px}
  .t-script{font-size:26px;line-height:34px}
  .hero{aspect-ratio:4/5;min-height:0}
  .hero__img{object-position:62% center}
  .intro{padding:56px 0 48px}
  .intro__text{margin-top:20px}
  .recent__grid{grid-template-columns:1fr;gap:40px}
  .card__name{margin-top:16px}
  .team__title{width:auto;line-height:36px}
  .services__grid{gap:48px}
  .featured__strip{grid-template-columns:1fr;aspect-ratio:auto;gap:4px}
  .featured__strip img{aspect-ratio:413/634;height:auto}
  .clients__logos{flex-wrap:wrap;justify-content:center;gap:28px 32px}
  .clients__logos img{max-width:40%}
  .footer__in{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}