/*
Theme Name: Framework Projects
Theme URI: https://frameworkprojects.ca
Author: Framework Projects Ltd.
Description: Two-page site for Framework Projects Ltd. Home page covers modern methods of construction, prefabrication, wood and Framework 313. Second page covers the building layout efficiency service. Built to the Framework Projects brand system: forest and honey palette, square corners, no shadows, no gradients.
Version: 4.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: framework-projects
*/

:root{
  --forest:#1E4D2B; --forest-deep:#16371F; --honey:#D9A441; --comb:#EFD08A;
  --honey-dark:#8A6420; --cream:#F8F5EE; --parchment:#F2E8D2; --moss:#5B8C5F; --sage:#D7E3CE;
  --text-heading:var(--forest); --text-body:#22301F; --text-secondary:#4A5646; --text-muted:#7A8474;
  --surface-page:var(--cream); --surface-card:#fff; --surface-tint:#F1EBDD; --surface-callout:#F5F0E4;
  --border-subtle:#E3DDCE; --border-rule:#DDD6C6;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);
 font-family:"Neue Haas Grotesk Display","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
h1,h2,h3,h4{color:var(--text-heading);margin:0;line-height:1.14;font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(30px,3.6vw,46px)}
h3{font-size:22px;letter-spacing:-.01em}
h4{font-size:17px;letter-spacing:0}
p{margin:0 0 1.05em}
a{color:inherit}
section{padding:96px 0;border-top:1px solid var(--border-subtle);scroll-margin-top:76px}
.lead{font-size:20px;color:var(--text-secondary);max-width:62ch}
.muted{color:var(--text-muted)}
.small{font-size:14.5px;line-height:1.55}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(248,245,238,.94);backdrop-filter:blur(8px);
 border-bottom:1px solid var(--border-subtle)}
header .wrap{display:flex;align-items:center;gap:18px;height:74px}
header img.logo{height:34px;width:auto;display:block}
nav{display:flex;gap:16px;margin-left:auto;font-size:14px;color:var(--text-secondary);white-space:nowrap}
nav a{text-decoration:none;white-space:nowrap}
nav a:hover{color:var(--forest)}
.btn{display:inline-block;background:var(--forest);color:var(--parchment);text-decoration:none;
 white-space:nowrap;padding:11px 18px;border-radius:2px;font-size:15px;font-weight:600;letter-spacing:.01em}
.btn.ghost{background:transparent;color:var(--forest);border:1.5px solid var(--forest)}
.tel{font-size:15px;color:var(--text-secondary);white-space:nowrap}

/* hero */
.hero{padding:96px 0 104px;border-top:0;background:var(--forest);color:var(--parchment);
 position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:url("<?php echo esc_url( get_template_directory_uri() ); ?>/assets/img/pattern-tile.svg");
 background-size:300px auto;background-repeat:repeat;opacity:.34;pointer-events:none}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(40px,6.4vw,78px);max-width:16ch;color:var(--parchment)}
.hero .sub{font-size:clamp(19px,2vw,25px);color:var(--comb);margin-top:22px;max-width:40ch}
.hero .figcap{color:#9FB79B}
.hero .btn{background:var(--honey);color:#2A1F05}
.hero .btn.ghost{background:transparent;color:var(--parchment);border-color:rgba(242,232,210,.55)}
.hero .ph{background:rgba(239,208,138,.10);border-color:var(--comb)}
.hero .ph .tag,.hero .ph .what{color:var(--comb)}
.hero .ph .src{color:#C8D8C4}
.hero .cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.heroimg{margin-top:56px}
.heroimg img{width:100%;display:block;border-radius:3px}
.figcap{font-size:13.5px;color:var(--text-muted);margin-top:10px}
.collabel{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:var(--honey-dark);border-bottom:2px solid var(--honey);padding-bottom:8px}

/* stats */
.statband{padding:0;border-top:0}
.statband .stats{margin-top:0;border-top:0}
.stats-3{grid-template-columns:repeat(3,1fr)!important}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle);
 margin-top:56px;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.stat{background:var(--surface-page);padding:26px 22px}
.stat .n{font-size:34px;font-weight:700;color:var(--forest);line-height:1.05;letter-spacing:-.02em}
.stat .l{font-size:14px;color:var(--text-secondary);margin-top:7px}
.stat .foot{font-size:12.5px;color:var(--text-muted);margin-top:6px}

/* grids */
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.gap-t{margin-top:52px}
img.full{width:100%;display:block;border-radius:3px}
.two img.full{aspect-ratio:3/2;object-fit:cover}

/* cards */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:3px;padding:26px 24px}
.card h3{margin-bottom:10px}
.step{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:34px 0;border-top:1px solid var(--border-rule)}
.step .num{font-size:15px;font-weight:700;color:var(--honey-dark);letter-spacing:.06em;padding-top:4px}
.step h3{margin-bottom:9px}

/* placeholder */
.ph{border:2px dashed var(--moss);background:var(--sage);border-radius:3px;
 padding:26px 24px;display:flex;flex-direction:column;justify-content:center;min-height:190px}
.ph .tag{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin-bottom:9px}
.ph .what{font-size:16px;font-weight:600;color:var(--forest-deep);line-height:1.35}
.ph .src{font-size:13.5px;color:#3C5A3F;margin-top:9px;line-height:1.5}
.ph.tall{min-height:280px}
.ph.wide{min-height:340px}
.ph.short{min-height:132px}

/* provisional image */
.prov{position:relative}
.prov img{filter:saturate(.96)}
.prov .flag{position:absolute;top:12px;left:12px;background:var(--honey);color:#3A2A05;
 font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:2px}

/* open question chip */
.open{display:inline-block;background:var(--comb);color:#5A4310;font-size:11.5px;font-weight:700;
 letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:2px;vertical-align:middle;margin-left:8px}
.opennote{font-size:13.5px;color:var(--honey-dark);margin-top:8px}

/* dark section */
.dark{background:var(--forest);color:var(--parchment);border-top:0}
.dark h2,.dark h3,.dark h4{color:var(--parchment)}
.dark .lead,.dark p{color:#C8D8C4}
.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark .stat{background:var(--forest)}
.dark .stat .n{color:var(--comb)}
.dark .stat .l{color:#B8C9B4}
.dark .stats{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.dark .ph{background:rgba(239,208,138,.10);border-color:var(--comb)}
.dark .ph .tag,.dark .ph .what{color:var(--comb)}
.dark .ph .src{color:#C8D8C4}
/* two dark sections in a row need a visible seam */
.dark + .dark{border-top:1px solid rgba(242,232,210,.18)}

.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
 color:var(--honey-dark);margin-bottom:16px}
.rule{height:3px;width:56px;background:var(--honey);margin-bottom:24px}

figure{margin:0}
.curve{background:var(--cream);border:1px solid var(--border-subtle);border-radius:3px;padding:8px}
.curve svg{width:100%;height:auto;display:block}

/* second page */
.tier{border:1px solid var(--border-subtle);background:var(--surface-card);border-radius:3px;padding:28px 26px}
.tier .n{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--honey-dark);margin-bottom:8px}
.tier h3{margin-bottom:10px}
.tier .meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.tier .meta .k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted)}
.tier .meta p{margin:2px 0 12px;font-size:14.5px;line-height:1.5}
.tier .meta p:last-child{margin-bottom:0}
.panel{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);border-radius:3px;padding:28px 26px}
.panel .k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--comb);margin-bottom:14px}
.panel ul{margin:0;padding:0;list-style:none}
.panel li{position:relative;padding-left:26px;margin-bottom:14px;color:#C8D8C4;font-size:15.5px;line-height:1.55}
.panel li:last-child{margin-bottom:0}
.panel li::before{content:"\2192";position:absolute;left:0;color:var(--comb);font-weight:700}
.bignum{font-size:44px;font-weight:700;color:var(--comb);letter-spacing:-.02em;line-height:1}
.backlink{display:inline-block;font-size:14px;color:var(--text-secondary);text-decoration:none;margin-bottom:14px}
.hero .backlink{color:#9FB79B}
.hero .backlink:hover{color:var(--comb)}
.backlink:hover{color:var(--forest)}
footer{background:var(--forest-deep);color:#B8C9B4;padding:64px 0 44px;font-size:15px}
footer h4{color:var(--parchment);margin-bottom:14px}
footer img.logo{height:32px;margin-bottom:22px}
footer a{color:var(--comb)}

@media(max-width:1340px){ .tel{display:none} }
@media(max-width:1100px){ nav{gap:14px;font-size:13.5px} }
@media(max-width:900px){
 .two,.three,.four,.stats{grid-template-columns:1fr}
 .stats{gap:1px}
 nav{display:none}
 section{padding:64px 0}
}

/* WordPress admin bar clearance */
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}