/* Rescom Joinery — site styles (extracted from index for CSP). */

  :root{
    --bone:#F0F3F6;
    --bone2:#E5EAF0;
    --ink:#1B2430;
    --ink-soft:#5C6878;
    --bronze:#5D7FA8;
    --line:rgba(27,36,48,0.16);
    --line-soft:rgba(27,36,48,0.09);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}

  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bone);
    color:var(--ink-soft);
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  .container{width:100%;max-width:1760px;margin:0 auto;padding:0 clamp(24px,4vw,72px)}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}

  ::selection{background:var(--ink);color:var(--bone)}

  .serif{
    font-family:'Instrument Serif',Georgia,serif;
    font-weight:400;
    color:var(--ink);
    letter-spacing:-0.01em;
    line-height:1.02;
  }
  .serif em{font-style:italic;color:var(--bronze)}

  .micro{
    font-size:0.62rem;font-weight:500;
    letter-spacing:0.3em;text-transform:uppercase;
    color:var(--ink-soft);
  }
  .micro.bronze{color:var(--bronze)}

  img{display:block;max-width:100%}

  .tlink{
    display:inline-block;position:relative;
    font-size:0.7rem;font-weight:600;
    letter-spacing:0.26em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;
    padding-bottom:8px;
  }
  .tlink::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
    background:var(--ink);transform-origin:left;
    transition:transform .4s cubic-bezier(.6,0,.2,1);
  }
  .tlink:hover::after{transform:scaleX(0.35)}
  .tlink .arr{margin-left:10px;color:var(--bronze)}

  /* ---------- Nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:60;
    background:rgba(240,243,246,0.9);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;height:92px}
  .brand{display:flex;align-items:center;gap:16px;text-decoration:none}
  .brand img.icon{height:48px;width:auto}
  .brand img.wordmark{height:32px;width:auto}
  .nav-links{display:flex;align-items:center;gap:36px;list-style:none}
  .nav-links a{
    position:relative;
    font-size:0.64rem;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;
    color:var(--ink-soft);text-decoration:none;transition:color .25s ease;padding-bottom:5px;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
    background:var(--ink);transform:scaleX(0);transform-origin:left;
    transition:transform .35s cubic-bezier(.6,0,.2,1);
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1)}
  .burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
  .burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px 0;transition:transform .25s ease,opacity .25s ease}
  .mobile-menu{display:none;border-top:1px solid var(--line-soft);background:var(--bone);padding:6px clamp(24px,4.5vw,64px) 26px}
  .mobile-menu a{
    display:block;padding:16px 0;
    font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--ink);
    text-decoration:none;border-bottom:1px solid var(--line-soft);
  }
  .mobile-menu a:last-child{border-bottom:0}
  nav.open .mobile-menu{display:block}
  nav.open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  nav.open .burger span:nth-child(2){opacity:0}
  nav.open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* ---------- Hero ---------- */
  .hero{padding:128px 0 0}
  .masthead{
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:44px;
  }
  .hero h1{
    font-size:clamp(3.4rem,9.4vw,9.2rem);
    max-width:1500px;
    margin-bottom:20px;
  }
  .hero-tagline{
    display:flex;align-items:center;gap:18px;margin-bottom:36px;
  }
  .hero-tagline .rule{width:64px;height:1px;background:var(--bronze)}
  .hero-comp{align-items:start}
  .hero-intro{
    display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
    margin-bottom:44px;
  }
  .hero-intro p{font-size:0.98rem;max-width:460px}
  .hero-img-main{grid-column:1/span 12}
  .hero-img-main img{width:100%;aspect-ratio:21/9;object-fit:cover}
  .hero-caption{grid-column:1/span 12;display:flex;justify-content:space-between;gap:16px;margin-top:14px}

  .imgwrap{overflow:hidden}
  .imgwrap img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
  .in .imgwrap img, .loaded .hero-img-main.in img{transform:scale(1)}

  .rise{opacity:0;transform:translateY(26px)}
  .loaded .rise{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.1s ease}
  .loaded .rise.d1{transition-delay:0.1s}
  .loaded .rise.d2{transition-delay:0.25s}
  .loaded .rise.d3{transition-delay:0.4s}

  /* ---------- Sections ---------- */
  section{padding:96px 0}
  .sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:56px}
  .sec-head .no{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.1rem;color:var(--bronze)}
  .sec-head .rule{flex:1;height:1px;background:var(--line-soft);align-self:center}

  h2.serif{font-size:clamp(2.6rem,5.6vw,4.6rem)}

  /* ---------- About ---------- */
  .about-copy{grid-column:1/span 6}
  .about-copy h2{margin-bottom:44px}
  .about-copy p{font-size:0.98rem;margin-bottom:22px;max-width:560px}
  .about-img{grid-column:8/span 5;margin-top:40px}
  .about-img img{width:100%}
  .fig-caption{
    display:flex;justify-content:space-between;gap:14px;margin-top:14px;
  }
  .stats{margin-top:80px;border-top:1px solid var(--line)}
  .stat{
    padding:44px 0;border-bottom:1px solid var(--line-soft);
    display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:baseline;
  }
  .stat .num{
    grid-column:1/span 4;
    font-family:'Instrument Serif',serif;
    font-size:clamp(3.4rem,6.4vw,5.6rem);line-height:1;color:var(--ink);
  }
  .stat .num em{font-style:italic;color:var(--bronze)}
  .stat .label{grid-column:5/span 4}
  .stat .note{grid-column:9/span 4;font-size:0.86rem}

  /* ---------- Facility (production floor photo) ---------- */
  .facility{margin-top:64px}
  .facility .imgwrap img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}

  /* ---------- Plate (framed full image) ---------- */
  .plate{padding:0}
  .plate .imgwrap img{width:100%;height:auto}
  .plate .fig-caption{padding:14px clamp(24px,4.5vw,64px) 0}

  /* ---------- Capabilities: editorial index rows ---------- */
  .cap-list{border-top:1px solid var(--line)}
  .cap-item{
    display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px);
    align-items:center;
    padding:52px 0;border-bottom:1px solid var(--line);
    transition:background .35s ease;
  }
  .cap-item:hover{background:var(--bone2)}
  .cap-item .c-no{grid-column:1/span 1;font-family:'Instrument Serif',serif;font-style:italic;font-size:1.05rem;color:var(--bronze)}
  .cap-item .c-title{grid-column:2/span 5;font-family:'Instrument Serif',serif;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.05;color:var(--ink)}
  .cap-item .c-copy{grid-column:7/span 4;font-size:0.9rem}
  .cap-item .c-thumb{grid-column:11/span 2}
  .cap-item .c-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover}

  /* ---------- Process ---------- */
  .quote{
    font-family:'Instrument Serif',serif;font-style:italic;
    font-size:clamp(2rem,4.4vw,3.6rem);color:var(--ink);line-height:1.15;
    max-width:900px;margin-bottom:80px;
  }
  .quote .q-mark{color:var(--bronze)}
  .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
  .step{border-top:1px solid var(--line);padding-top:26px}
  .step .no{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.2rem;color:var(--bronze);margin-bottom:16px}
  .step h3{font-size:0.72rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
  .step p{font-size:0.9rem}

  /* ---------- Work: asymmetric gallery ---------- */
  .work-grid{row-gap:clamp(48px,6vw,100px)}
  .w-a{grid-column:1/span 7}
  .w-b{grid-column:9/span 4;margin-top:clamp(60px,8vw,140px)}
  .w-c{grid-column:2/span 4;margin-top:clamp(-40px,-3vw,-20px)}
  .w-d{grid-column:7/span 6}
  .w-e{grid-column:1/span 6}
  .w-f{grid-column:8/span 5;margin-top:clamp(50px,6vw,110px)}
  .work-grid img{width:100%;object-fit:cover}
  .w-a img{aspect-ratio:16/11}
  .w-b img{aspect-ratio:4/5}
  .w-c img{aspect-ratio:4/3}
  .w-d img{aspect-ratio:16/10}
  .w-e img{aspect-ratio:16/10}
  .w-f img{aspect-ratio:4/3}

  /* ---------- Partners: typographic ---------- */
  .partners-lead{max-width:600px;font-size:0.98rem;margin-bottom:70px}
  .p-featured{border-top:1px solid var(--line)}
  .p-row{
    display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:baseline;
    padding:38px 0;border-bottom:1px solid var(--line);
  }
  .p-row .p-name{grid-column:1/span 5;font-family:'Instrument Serif',serif;font-size:clamp(1.9rem,3.6vw,3rem);color:var(--ink);line-height:1.05;display:flex;align-items:center;gap:24px}
  .p-row .p-logo{height:44px;width:auto;mix-blend-mode:multiply}
  .p-row .p-since{grid-column:7/span 3}
  .p-row .p-scope{grid-column:10/span 3;text-align:right}
  .logo-wall{
    margin-top:56px;
    display:grid;grid-template-columns:repeat(6,1fr);
    border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);
  }
  .logo-cell{
    display:flex;align-items:center;justify-content:center;
    aspect-ratio:16/9;padding:22px;
    border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
    background:transparent;
  }
  .logo-cell img{
    max-height:52px;max-width:78%;width:auto;object-fit:contain;
    mix-blend-mode:multiply;
  }
  .p-note{font-size:0.82rem;font-style:italic;margin-top:40px}

  /* ---------- Rescom Way ---------- */
  .way-lead{max-width:620px;font-size:0.98rem;margin-bottom:64px}
  .way-list{border-top:1px solid var(--line)}
  .way-row{
    display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:baseline;
    padding:30px 0;border-bottom:1px solid var(--line-soft);
    transition:background .35s ease;
  }
  .way-row:hover{background:var(--bone2)}
  .way-row .w-letter{grid-column:1/span 1;font-family:'Instrument Serif',serif;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;color:var(--bronze)}
  .way-row .w-title{grid-column:2/span 4;font-size:0.72rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink)}
  .way-row .w-copy{grid-column:6/span 7;font-size:0.9rem}

  /* ---------- CTA / Contact form ---------- */
  .cta{padding:120px 0;background:var(--bone2);border-top:1px solid var(--line-soft)}
  .cta .micro{display:block;margin-bottom:30px}
  .cta h2{font-size:clamp(3.2rem,7.4vw,7rem);margin-bottom:56px}
  .cform{max-width:840px}
  .cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
  .cform .field{margin-bottom:38px}
  .cform label{
    display:block;font-size:0.62rem;font-weight:600;letter-spacing:0.26em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;
  }
  .cform input,.cform textarea{
    width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
    padding:10px 0;font-family:'Instrument Serif',serif;font-size:1.25rem;color:var(--ink);
    border-radius:0;transition:border-color .3s ease;
  }
  .cform textarea{resize:vertical;min-height:96px;line-height:1.4}
  .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--bronze)}
  .cform input::placeholder,.cform textarea::placeholder{color:rgba(92,104,120,0.5)}
  .cform .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
  .cform button{
    background:var(--ink);color:var(--bone);border:0;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:600;
    letter-spacing:0.26em;text-transform:uppercase;
    padding:20px 44px;margin-top:6px;
    transition:background .3s ease;
  }
  .cform button:hover{background:var(--bronze)}
  .cform-done{display:none;font-family:'Instrument Serif',serif;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ink);line-height:1.3;max-width:700px}
  .cform-done em{font-style:italic;color:var(--bronze)}
  .cform.sent form{display:none}
  .cform.sent .cform-done{display:block}

  /* ---------- Footer ---------- */
  footer{padding:64px 0 46px;border-top:1px solid var(--line)}
  .foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
  .foot-brand{display:flex;align-items:center;gap:13px}
  .foot-brand img.icon{height:30px}
  .foot-brand img.wordmark{height:20px}
  .foot-links{display:flex;gap:28px;flex-wrap:wrap}
  .foot-links a{
    font-size:0.62rem;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;
    color:var(--ink-soft);text-decoration:none;transition:color .2s ease;
  }
  .foot-links a:hover{color:var(--ink)}
  .foot-contact{font-size:0.88rem;text-align:right}
  .foot-contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s ease}
  .foot-contact a:hover{border-color:var(--ink)}
  .foot-bottom{
    margin-top:54px;padding-top:24px;border-top:1px solid var(--line-soft);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-size:0.6rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-soft);
  }

  /* ---------- Reveal / transitions ---------- */
  .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.2s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
  .sec-head.reveal{transform:translateY(0);clip-path:inset(0 100% 0 0)}
  .sec-head.reveal.in{clip-path:inset(0 0 0 0);transition:opacity 1s ease,clip-path 1.2s cubic-bezier(.6,0,.2,1)}
  .plate .imgwrap{clip-path:inset(6% 4% 6% 4%);transition:clip-path 1.4s cubic-bezier(.6,0,.2,1)}
  .plate.in .imgwrap{clip-path:inset(0 0 0 0)}

  /* Style B — curtain wipe */
  body.t-b .reveal{transform:none;clip-path:inset(0 0 100% 0);transition:opacity 1.1s ease,clip-path 1.2s cubic-bezier(.6,0,.2,1)}
  body.t-b .reveal.in{clip-path:inset(0 0 0 0)}
  body.t-b .plate .imgwrap{clip-path:inset(100% 0 0 0)}
  body.t-b .plate.in .imgwrap{clip-path:inset(0 0 0 0)}
  /* Style C — fade & scale */
  body.t-c .reveal{transform:scale(0.965);filter:blur(6px);transition:opacity 1.3s ease,transform 1.3s cubic-bezier(.22,1,.36,1),filter 1.3s ease}
  body.t-c .reveal.in{transform:scale(1);filter:blur(0)}
  body.t-c .sec-head.reveal{clip-path:none}
  body.t-c .plate .imgwrap{clip-path:none}

  /* ---------- Responsive ---------- */
  @media (max-width:1000px){
    .nav-links{display:none}
    .burger{display:block}
    .hero-img-main{grid-column:1/span 12}
    .way-row .w-letter{grid-column:1/span 2}
    .way-row .w-title{grid-column:3/span 10}
    .way-row .w-copy{grid-column:3/span 10;margin-top:8px}
    .cform .frow{grid-template-columns:1fr}
    .hero-img-main{grid-column:1/span 12}
    .hero-caption{grid-column:1/span 12}
    .about-copy{grid-column:1/span 12}
    .about-img{grid-column:2/span 10;margin-top:56px}
    .stat .num{grid-column:1/span 12}
    .stat .label{grid-column:1/span 12;margin-top:6px}
    .stat .note{grid-column:1/span 12;text-align:left;margin-top:10px}
    .cap-item .c-no{grid-column:1/span 2}
    .cap-item .c-title{grid-column:3/span 10}
    .cap-item .c-copy{grid-column:3/span 10;margin-top:14px}
    .cap-item .c-thumb{grid-column:3/span 6;margin-top:20px}
    .process-grid{grid-template-columns:1fr 1fr}
    .w-a{grid-column:1/span 12}
    .w-b{grid-column:3/span 8;margin-top:0}
    .w-c{grid-column:1/span 8;margin-top:0}
    .w-d{grid-column:2/span 11}
    .w-e{grid-column:1/span 10}
    .w-f{grid-column:3/span 10;margin-top:0}
    .p-row .p-name{grid-column:1/span 12}
    .p-row .p-since{grid-column:1/span 6;margin-top:8px}
    .p-row .p-scope{grid-column:7/span 6;text-align:right;margin-top:8px}
    .logo-wall{grid-template-columns:repeat(3,1fr)}
    .foot-contact{text-align:left}
  }
  @media (max-width:640px){
    section{padding:72px 0}
    .hero{padding-top:120px}
    .process-grid{grid-template-columns:1fr;gap:36px}
  }

  @media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto}
    .rise,.reveal{opacity:1!important;transform:none!important;transition:none!important}
    .imgwrap img{transform:none!important;transition:none!important}
  }

  /* ---------- Utility classes (replace inline style attributes for strict CSP) ---------- */
  .pt-0{padding-top:0}
  .mb-40{margin-bottom:40px}
  .mb-70{margin-bottom:70px}
  /* ---------- Contact form status (additive; matches brand) ---------- */
  .cform-error{display:none;margin-top:8px;font-family:'Instrument Serif',serif;font-size:1.1rem;color:#8a2b1f}
  .cform.error .cform-error{display:block}
  .cform button[disabled]{opacity:0.55;cursor:default}