/* ===== LINEFEATHER — Drafting Table & Feather Quill ===== */

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-size:16px;
  font-family:"Georgia","Times New Roman",serif;
}

.home-page{
  background-color:#F3F4F0;
  color:#262C30;
  font-size:16px;
  font-family:"Georgia","Times New Roman",serif;
  line-height:1.7;
  overflow-x:hidden;
}

a{text-decoration:none}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

.fade-up{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

/* ===== T-SQUARE NAV ===== */
.tsquarenav{
  position:sticky;
  top:0;
  z-index:900;
  background-color:#303A42;
  border-bottom:2px solid #414C54;
}

.tsquarenav .scale-strip{
  height:16px;
  background-image:repeating-linear-gradient(
    90deg,
    #C0913C 0 14px,
    #FBFCF9 14px 28px
  );
  position:relative;
  overflow:hidden;
}

.tsquarenav .scale-strip::after{
  content:"";
  position:absolute;
  left:62%;
  top:0;
  width:2px;
  height:16px;
  background-color:#34558B;
}

.tsquarenav .tnav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:15px 24px;
}

.tsquarenav .brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.tsquarenav .brand-glyph{
  width:20px;
  height:14px;
  background-image:linear-gradient(30deg,transparent 0 42%,#FBFCF9 42% 46%,#34558B 46% 100%);
  transform:rotate(-22deg);
  position:relative;
}

.tsquarenav .brand-glyph::after{
  content:"";
  position:absolute;
  right:-2px;
  top:0;
  width:3px;
  height:3px;
  background-color:#C0913C;
  border-radius:50%;
}

.tsquarenav .brand-name{
  color:#FBFCF9;
  font-size:21px;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  font-family:"Trebuchet MS",Verdana,sans-serif;
}

.tsquarenav .nav-links{
  display:flex;
  align-items:center;
  gap:20px;
  list-style:none;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.tsquarenav .nav-links li{display:flex;align-items:center;gap:20px;position:relative}

.tsquarenav .nav-links li::after{
  content:"";
  width:5px;
  height:5px;
  background-color:#C0913C;
  border-radius:50%;
}

.tsquarenav .nav-links li:last-child::after{display:none}

.tsquarenav .nav-links a{
  color:#BCC7CC;
  padding-bottom:4px;
  position:relative;
  transition:color .2s ease;
}

.tsquarenav .nav-links a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  background-color:#34558B;
  transition:width .2s ease,left .2s ease;
}

.tsquarenav .nav-links a:hover{color:#C0913C}

.tsquarenav .nav-links a:hover::after{
  width:100%;
  left:0;
}

/* mobile toggle */
.tsquarenav .nav-toggle{
  display:none;
  background:none;
  border:1px solid #FBFCF9;
  color:#FBFCF9;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:14px;
  padding:6px 12px;
  cursor:pointer;
}

@media(max-width:860px){
  .tsquarenav .nav-links{
    display:none;
    width:100%;
    flex-direction:column;
    background-color:#303A42;
    padding:0 0 16px 0;
  }
  .tsquarenav .nav-links.open{display:flex}
  .tsquarenav .nav-toggle{display:block}
  .tsquarenav .tnav-row{flex-wrap:wrap}
  .tsquarenav .nav-links li{flex-direction:column;gap:4px}
  .tsquarenav .nav-links li::after{display:none}
}

/* ===== HERO — DRAFTING BOARD ===== */
.draftboardhero{
  background-color:#F3F4F0;
  padding:84px 0;
}

.draftboardhero .dhero-grid{
  display:grid;
  grid-template-columns:55% 45%;
  gap:48px;
  align-items:center;
}

.dhero-eyebrow{
  display:inline-block;
  background-color:#34558B;
  color:#F3F4F0;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:8px 14px;
  margin-bottom:22px;
}

.dhero-headline{
  font-size:48px;
  line-height:1.08;
  color:#262C30;
  font-family:"Georgia","Times New Roman",serif;
  margin-bottom:22px;
}

.dhero-headline em{
  font-style:italic;
  color:#34558B;
}

.dhero-subcopy{
  max-width:560px;
  font-size:17px;
  color:#515A62;
  margin-bottom:30px;
}

.dhero-ctas{display:flex;gap:16px;flex-wrap:wrap}

.btn-primary{
  display:inline-block;
  background-color:#34558B;
  color:#FBFCF9;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:14px 28px;
  border:1px solid #34558B;
  transition:background-color .2s ease;
}

.btn-primary:hover{background-color:#262C30;border-color:#262C30}

.btn-secondary{
  display:inline-block;
  background-color:transparent;
  color:#262C30;
  border:1px solid #262C30;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:14px 28px;
  transition:background-color .2s ease,color .2s ease;
}

.btn-secondary:hover{background-color:#303A42;color:#FBFCF9}

/* drafting scene */
.draftboard-scene{
  position:relative;
  height:480px;
}

.draft-board{
  position:absolute;
  left:6%;
  top:12%;
  width:74%;
  height:72%;
  background-color:#E7E2D0;
  border:2px solid #C0913C;
  transform:rotate(-6deg);
  box-shadow:10px 18px 24px rgba(38,44,48,0.18);
}

.draft-sheet{
  position:absolute;
  left:6%;
  top:7%;
  width:88%;
  height:86%;
  background-color:#FBFCF9;
  border:1px solid #414C54;
  background-image:linear-gradient(#414C54 1px,transparent 1px),linear-gradient(90deg,#414C54 1px,transparent 1px);
  background-size:22px 22px;
}

.draft-sheet::after{
  content:"";
  position:absolute;
  left:8%;
  top:18%;
  width:84%;
  height:58%;
  border:3px solid #34558B;
  border-top:none;
  border-left:none;
  border-radius:0 0 60% 40%;
  opacity:.9;
}

.draft-clamp{
  position:absolute;
  width:14px;
  height:22px;
  background-color:#303A42;
  border:1px solid #C0913C;
}

.draft-clamp-1{left:2%;top:3%}
.draft-clamp-2{right:2%;top:3%}
.draft-clamp-3{left:2%;bottom:3%}
.draft-clamp-4{right:2%;bottom:3%}

.tsquare{
  position:absolute;
  left:10%;
  top:38%;
  width:78%;
  height:12px;
  background-color:#303A42;
  border:1px solid #262C30;
  transform:rotate(-2deg);
}

.tsquare::after{
  content:"";
  position:absolute;
  left:-40px;
  top:-9px;
  width:40px;
  height:30px;
  background-color:#303A42;
  border:1px solid #262C30;
}

.triangle{
  position:absolute;
  left:30%;
  bottom:18%;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 92px 92px;
  border-color:transparent transparent #34558B transparent;
  opacity:.85;
}

.compass{
  position:absolute;
  right:14%;
  top:4%;
  width:2px;
  height:70px;
  background-color:#C0913C;
  transform:rotate(-14deg);
}

.compass::before{
  content:"";
  position:absolute;
  top:0;
  left:-4px;
  width:3px;
  height:16px;
  background-color:#1D262C;
  transform:rotate(24deg);
}

.compass::after{
  content:"";
  position:absolute;
  bottom:-3px;
  left:-2px;
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:#34558B;
}

.inkstand{
  position:absolute;
  left:14%;
  top:-4%;
  width:auto;
}

.inkstand .bottle{
  width:22px;
  height:34px;
  background-color:#1D262C;
  border:1px solid #C0913C;
  border-radius:2px 2px 6px 6px;
  margin-left:6px;
}

.quill{
  position:absolute;
  left:0;
  bottom:8px;
  width:44px;
  height:4px;
  background-color:#34558B;
  transform:rotate(34deg);
  border-radius:0 2px 2px 0;
}

.quill::after{
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:6px;
  height:6px;
  background-color:#C0913C;
  border-radius:50%;
}

.roll-paper{
  position:absolute;
  right:-2%;
  bottom:0;
  width:120px;
  height:46px;
}

.roll-paper .roll-body{
  width:120px;
  height:46px;
  background-color:#D8D3C2;
  border:1px solid #414C54;
  border-radius:0 0 8px 8px;
}

.roll-paper .curl{
  position:absolute;
  right:6px;
  bottom:-4px;
  width:56px;
  height:0;
  border-top:6px solid #FBFCF9;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transform:rotate(-8deg);
}

.scaling-ruler{
  position:absolute;
  left:0;
  bottom:-26px;
  width:200px;
  height:20px;
  border:1px solid #414C54;
  background:repeating-linear-gradient(90deg,#C0913C 0 14px,#FBFCF9 14px 28px);
  transform:rotate(9deg);
}

.lamp-arm{
  position:absolute;
  right:-6%;
  top:-8%;
  width:130px;
  height:120px;
  border-top:4px solid #1D262C;
  border-right:4px solid #1D262C;
}

.lamp-arm::after{
  content:"";
  position:absolute;
  left:120px;
  bottom:-4px;
  width:70px;
  height:28px;
  background-color:#34558B;
  border-radius:50% 50% 0 0;
  border:1px solid #262C30;
}

@media(max-width:900px){
  .draftboardhero .dhero-grid{grid-template-columns:1fr}
  .draftboard-scene{height:420px;max-width:480px;margin:0 auto}
  .dhero-headline{font-size:36px}
}

/* ===== PLATE-SERIES ROWS ===== */
.plate-series{
  background-color:#F3F4F0;
  padding:70px 0;
}

.section-head{
  margin-bottom:44px;
}

.section-head .kicker{
  color:#C0913C;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:block;
  margin-bottom:8px;
}

.section-head h2{
  color:#34558B;
  font-family:"Georgia","Times New Roman",serif;
  font-size:34px;
  line-height:1.2;
}

.lead-under{
  max-width:820px;
  color:#515A62;
  font-size:17px;
  margin-top:20px;
}

.plate-row{
  display:grid;
  grid-template-columns:110px 1fr auto;
  gap:28px;
  align-items:center;
  background-color:#FBFCF9;
  border:1px solid #414C54;
  padding:30px 32px;
  margin-bottom:12px;
}

.plate-index{
  background-color:#303A42;
  color:#FBFCF9;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:1px;
  text-align:center;
  padding:14px 6px;
  position:relative;
}

.plate-index::after{
  content:"";
  position:absolute;
  right:5px;
  top:5px;
  width:6px;
  height:6px;
  background-color:#C0913C;
  border-radius:50%;
}

.plate-body h3{
  color:#262C30;
  font-family:"Georgia","Times New Roman",serif;
  font-size:22px;
  margin-bottom:8px;
}

.plate-body p{
  color:#515A62;
  font-size:15px;
}

.plate-tag{
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-weight:700;
  color:#303A42;
  border:1px solid #C0913C;
  background-color:#F3F4F0;
  padding:4px 10px;
  transform:rotate(3deg);
}

@media(max-width:760px){
  .plate-row{grid-template-columns:1fr;gap:16px;padding:24px}
}

/* ===== METRIC BAND ===== */
.metric-band{
  background-color:#1D262C;
  padding:66px 0;
}

.metric-head{
  margin-bottom:44px;
  text-align:center;
}

.metric-head h2{
  color:#FBFCF9;
  font-family:"Georgia","Times New Roman",serif;
  font-size:28px;
  font-weight:400;
  line-height:1.35;
  max-width:860px;
  margin:0 auto;
}

.metric-note{
  color:#BCC7CC;
  font-family:Verdana,Arial,sans-serif;
  font-size:14px;
  text-align:center;
  max-width:820px;
  margin:38px auto 0 auto;
  line-height:1.8;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.metric{
  text-align:center;
  border-right:1px solid #414C54;
  padding:0 20px;
}

.metric:last-child{border-right:none}

.metric .number{
  color:#34558B;
  font-family:"Georgia","Times New Roman",serif;
  font-size:54px;
  line-height:1;
  margin-bottom:10px;
  font-weight:700;
}

.metric .label{
  color:#BCC7CC;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

@media(max-width:760px){
  .metric-grid{grid-template-columns:1fr 1fr;gap:28px 10px}
  .metric{border-right:none;border-bottom:1px solid #414C54;padding-bottom:18px}
  .metric:nth-child(3){grid-column:1 / -1;border-bottom:none}
}

/* ===== STATEMENT BAND ===== */
.statement-band{
  background-color:#303A42;
  padding:74px 0;
}

.statement-block{
  max-width:860px;
  margin:0 auto;
  padding-left:26px;
  border-left:4px solid #C0913C;
}

.statement-block p{
  color:#FBFCF9;
  font-family:"Georgia","Times New Roman",serif;
  font-size:21px;
  line-height:1.6;
  margin-bottom:18px;
}

.statement-block .statement-head{
  color:#C0913C;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:20px;
  font-weight:400;
}

.statement-block .say-who{
  color:#BCC7CC;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* ===== CTA BAND ===== */
.cta-band{
  background-color:#F3F4F0;
  padding:78px 0;
  text-align:center;
}

.cta-band h2{
  color:#34558B;
  font-family:"Georgia","Times New Roman",serif;
  font-size:34px;
  margin-bottom:16px;
}

.cta-band .kicker-line{
  color:#C0913C;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
}

.cta-band p{
  max-width:620px;
  margin:0 auto 28px auto;
  font-size:17px;
  color:#515A62;
}

/* ===== FOOTER ===== */
.tracing-footer{
  background-color:#161E23;
  padding-bottom:40px;
  position:relative;
  z-index:1;
}

.tracing-footer .gridstrip{
  height:16px;
  margin-bottom:40px;
  background-image:
    linear-gradient(90deg,transparent 0 22px,#C0913C 22px 23px,transparent 23px),
    linear-gradient(0deg,transparent 0 22px,#C0913C 22px 23px,transparent 23px);
  background-color:#20282E;
  position:relative;
  overflow:hidden;
}

.tracing-footer .gridstrip::after{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:40%;
  height:3px;
  background-color:#34558B;
}

.ft-overline{
  display:block;
  width:22px;
  height:16px;
  margin:0 auto 18px auto;
  background-image:linear-gradient(30deg,transparent 0 42%,#C0913C 42% 46%,#34558B 46% 100%);
  transform:rotate(-24deg);
}

.ft-brand{
  text-align:center;
  color:#FBFCF9;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:24px;
  letter-spacing:8px;
  text-transform:uppercase;
  margin-bottom:22px;
}

.tracing-footer .ft-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 24px;
  list-style:none;
  margin-bottom:26px;
}

.tracing-footer .ft-links a{
  color:#BCC7CC;
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.tracing-footer .ft-links a:hover{color:#C0913C}

.compass-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:24px;
}

.compass-divider .sprig{
  width:40px;
  height:2px;
  background-color:#C0913C;
  position:relative;
}

.compass-divider .sprig::after{
  content:"";
  position:absolute;
  right:0;
  top:-4px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 6px 8px 6px;
  border-color:transparent transparent #C0913C transparent;
  transform:rotate(-40deg);
}

.compass-dial{
  width:26px;
  height:26px;
  border:2px solid #C0913C;
  border-radius:50%;
  position:relative;
}

.compass-dial::before{
  content:"";
  position:absolute;
  left:50%;
  top:-3px;
  width:2px;
  height:30px;
  background-color:#34558B;
  transform:translateX(-50%) rotate(-14deg);
}

.compass-dial::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:#C0913C;
  transform:translateX(-50%);
}

.ft-legal{
  text-align:center;
  color:#BCC7CC;
  font-family:Verdana,Arial,sans-serif;
  font-size:12px;
  line-height:1.8;
}