/* ==========================================================================
   Terrace — shared design system
   Sunset Griffin Godo Kaisha
   ========================================================================== */

:root{
  --slate:#2F3A3B;
  --green:#4F6F4A;
  --stone:#B6B9B2;
  --bg-top:#FBFBF8;
  --bg-bottom:#ECEEE9;
  --amber:#93621F;
  --ink:#181D1C;
  --ink-2:#4C5451;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-bottom) 100%);
  color:var(--ink-2);
  font-family:'Literata', Georgia, 'Times New Roman', serif;
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-head{
  font-family:'Outfit', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
}
.font-cap{
  font-family:'Barlow Semi Condensed', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--green);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
@media(min-width:768px){.wrap{padding-left:40px;padding-right:40px}}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--slate);
  border-bottom:1px solid rgba(182,185,178,0.3);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{
  font-family:'Outfit',sans-serif;font-weight:600;color:var(--white);
  font-size:18px;letter-spacing:0.01em;display:flex;align-items:center;gap:10px;
}
.logo-mark{width:20px;height:20px;flex:0 0 auto}
.nav-links{display:none;align-items:center;gap:28px}
@media(min-width:900px){.nav-links{display:flex}}
.nav-links a{
  color:#DCE0DA;font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:500;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);border-bottom-color:var(--amber)}
.contact-btn{
  border:2px solid var(--amber);color:var(--amber);background:transparent;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;
  padding:9px 20px;border-radius:2px;
}
.contact-btn:hover{background:var(--amber);color:var(--slate)}
.contact-btn:active{box-shadow:inset 0 0 0 2px var(--slate)}

.burger{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
@media(min-width:900px){.burger{display:none}}
.burger span{width:24px;height:2px;background:var(--white);display:block}
.mobile-nav{
  position:fixed;top:64px;left:0;right:0;z-index:39;background:var(--slate);
  border-bottom:1px solid rgba(182,185,178,0.3);
}
.mobile-nav.hidden{display:none}
.mobile-nav a{
  display:block;padding:14px 24px;color:#DCE0DA;font-family:'Outfit',sans-serif;
  border-top:1px solid rgba(182,185,178,0.15);font-size:15px;
}
.mobile-nav a.active{color:var(--amber)}

main{padding-top:64px}

/* ---------- title header (special pages) ---------- */
.title-header{
  background:var(--slate);border-bottom:1px solid rgba(182,185,178,0.3);
}
.title-header .topbar-inner{height:64px}

/* ---------- terrace bands ---------- */
.terrace{
  position:relative;
  border-top:1px solid var(--stone);
  padding:56px 0;
}
.terrace:first-of-type{border-top:none}
.terrace-marker{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.marker-glyph{width:22px;height:22px;flex:0 0 auto;color:var(--stone)}
.terrace:hover .marker-glyph,.terrace:focus-within .marker-glyph{color:var(--green)}
.terrace-step{font-family:'Barlow Semi Condensed',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--green)}

/* stepped indentation, desktop */
.t-0{margin-left:0}
.t-1{margin-left:2.4%}
.t-2{margin-left:4.8%}
.t-3{margin-left:7.2%}
.t-4{margin-left:9.6%}
.t-5{margin-left:12%}
@media(max-width:900px){
  .t-0,.t-1,.t-2,.t-3,.t-4,.t-5{margin-left:0;padding-left:16px;border-left:3px solid var(--stone)}
  .t-1{border-left-width:5px}
  .t-2{border-left-width:7px}
  .t-3{border-left-width:9px}
  .t-4{border-left-width:11px}
  .t-5{border-left-width:13px}
}
.terrace:hover{background:rgba(79,111,74,0.045)}

/* ---------- hero ---------- */
.hero-wide{
  min-height:75vh;display:flex;align-items:flex-end;position:relative;
  background:linear-gradient(180deg, rgba(24,29,28,0.15), rgba(24,29,28,0.55)), var(--slate);
  background-size:cover;background-position:center;
  color:var(--white);
}
.hero-wide .wrap{padding-bottom:64px;padding-top:140px}
.hero-eyebrow{color:#D9C9A8;font-family:'Barlow Semi Condensed',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px}
.hero-wide h1{color:var(--white);font-size:clamp(2rem,4.5vw,3.4rem);max-width:820px}
.hero-wide p{color:#E7E9E4;font-size:1.15rem;max-width:640px;margin-top:18px;font-family:'Literata',serif}
.hero-home-btn{
  margin-top:32px;display:inline-block;border:2px solid var(--white);color:var(--white);
  padding:11px 24px;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;border-radius:2px;
}
.hero-home-btn:hover{background:var(--white);color:var(--slate)}

/* index hero (not full-width mandate, but consistent) */
.hero-index{
  padding-top:120px;padding-bottom:64px;
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
}

/* ---------- buttons ---------- */
.btn-primary{
  display:inline-block;background:transparent;border:2px solid var(--amber);color:var(--amber);
  font-family:'Outfit',sans-serif;font-weight:600;font-size:14.5px;padding:12px 26px;border-radius:2px;
}
.btn-primary:hover{background:var(--amber);color:var(--white)}
.btn-primary:active{box-shadow:inset 0 0 0 2px var(--slate)}
.btn-ghost{
  display:inline-block;background:transparent;border:2px solid var(--stone);color:var(--ink);
  font-family:'Outfit',sans-serif;font-weight:600;font-size:14.5px;padding:12px 26px;border-radius:2px;
}
.btn-ghost:hover{background:var(--slate);color:var(--white);border-color:var(--slate)}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--stone);border-radius:4px;padding:28px;
}
.card:hover{background:rgba(79,111,74,0.04)}

/* ---------- terrace index (offers/nav aid on index) ---------- */
.terrace-index{border:1px solid var(--stone);border-radius:4px;background:var(--white)}
.terrace-index li{
  display:flex;justify-content:space-between;gap:16px;padding:16px 20px;border-top:1px solid var(--stone);
  font-family:'Outfit',sans-serif;font-size:14.5px;color:var(--ink);
}
.terrace-index li:first-child{border-top:none}
.terrace-index .idx-step{color:var(--amber);font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;margin-right:10px}
.terrace-index .idx-dur{color:var(--ink-2);font-family:'Barlow Semi Condensed',sans-serif;font-size:12.5px;white-space:nowrap}

/* ---------- reality note ---------- */
.reality-note{
  border:1px solid var(--amber);border-left:4px solid var(--amber);background:rgba(169,115,39,0.06);
  padding:22px 24px;border-radius:2px;
}
.reality-note .font-cap{color:var(--amber)}

/* ---------- entry route table ---------- */
.route-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--stone)}
.route-table th,.route-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--stone);font-size:14.5px}
.route-table th{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;letter-spacing:0.05em;font-size:12px;color:var(--green);background:rgba(79,111,74,0.06)}
.route-table tr:hover td{background:rgba(79,111,74,0.05)}
@media(max-width:640px){
  .route-table thead{display:none}
  .route-table, .route-table tbody, .route-table tr, .route-table td{display:block;width:100%}
  .route-table tr{border:1px solid var(--stone);margin-bottom:14px;border-radius:4px;overflow:hidden}
  .route-table td{border-bottom:1px solid var(--stone);display:flex;justify-content:space-between;gap:12px}
  .route-table td:last-child{border-bottom:none}
  .route-table td::before{content:attr(data-label);font-family:'Barlow Semi Condensed',sans-serif;color:var(--green);font-size:12px;text-transform:uppercase}
}

/* ---------- comparison table (comparison.html) ---------- */
.compare-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--stone)}
.compare-table th,.compare-table td{padding:14px 16px;border-bottom:1px solid var(--stone);font-size:14.5px;text-align:left;vertical-align:top}
.compare-table th{font-family:'Outfit',sans-serif;color:var(--white);background:var(--slate)}
.compare-table tr:hover td{background:rgba(79,111,74,0.05)}
@media (max-width:520px){.compare-table th,.compare-table td{padding:10px 8px;font-size:13.5px;overflow-wrap:anywhere}}

/* ---------- footer ---------- */
footer{background:var(--slate);color:#D6D9D2;padding:56px 0 28px}
footer h3,footer h4{color:var(--white);font-size:14.5px;margin-bottom:16px}
footer a{color:#C7CBC3;font-size:14px;display:block;padding:5px 0}
footer a:hover{color:var(--amber)}
.footer-cols{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:768px){.footer-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-bottom{border-top:1px solid rgba(182,185,178,0.25);margin-top:40px;padding-top:22px;font-size:13px;color:#A9AEA5}

/* simplified footer (special pages) */
.footer-simple{background:var(--slate);color:#D6D9D2;padding:40px 0 24px}
.footer-simple .flinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.footer-simple a{color:#C7CBC3;font-size:14px}
.footer-simple a:hover{color:var(--amber)}

/* ---------- forms ---------- */
label{font-family:'Outfit',sans-serif;font-size:13.5px;color:var(--ink);display:block;margin-bottom:6px;font-weight:500}
input,textarea,select{
  width:100%;border:1px solid var(--stone);border-radius:3px;padding:12px 14px;
  font-family:'Literata',serif;font-size:15px;color:var(--ink);background:var(--white);
}
input:focus,textarea:focus{outline:3px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.field{margin-bottom:20px}

/* ---------- utility ---------- */
.grid-2{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-5{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.grid-5{grid-template-columns:repeat(5,1fr)}}
.eyebrow{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;letter-spacing:0.08em;font-size:12.5px;color:var(--green);margin-bottom:10px;display:block}
.section-title{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:16px}
.text-amber{color:var(--amber)}
.text-green{color:var(--green)}
.hr-stone{border:none;border-top:1px solid var(--stone)}

details.faq{border-bottom:1px solid var(--stone);padding:16px 0}
details.faq summary{font-family:'Outfit',sans-serif;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--amber);font-size:20px}
details.faq[open] summary::after{content:'–'}
details.faq p{margin-top:10px}

/* cookie banner + modal */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--slate);color:#E4E6E1;
  border-top:2px solid var(--amber);padding:20px 0;
  transform:translateY(0);transition:transform .3s ease;
}
.cookie-banner.hidden{transform:translateY(120%)}
.cookie-banner .wrap{display:flex;flex-direction:column;gap:14px}
@media(min-width:768px){.cookie-banner .wrap{flex-direction:row;align-items:center;justify-content:space-between}}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-modal-backdrop{
  position:fixed;inset:0;background:rgba(24,29,28,0.55);z-index:70;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.cookie-modal-backdrop.hidden{display:none}
.cookie-modal{
  background:var(--white);border-radius:6px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;padding:32px;
}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--stone)}
.toggle{position:relative;width:44px;height:24px;flex:0 0 auto}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{position:absolute;inset:0;background:var(--stone);border-radius:24px;transition:.2s}
.toggle .slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--white);border-radius:50%;transition:.2s}
.toggle input:checked + .slider{background:var(--green)}
.toggle input:checked + .slider::before{transform:translateX(20px)}
.toggle input:disabled + .slider{opacity:.55}

.fade-in{animation:fadeIn .5s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/*a11y-contrast*/
.footer-simple a{display:inline-block;padding:4px 0;min-height:24px}
.contact-btn{color:#E0A95C;border-color:#E0A95C}
.contact-btn:hover{background:#E0A95C;color:var(--slate)}
.cookie-banner .btn-primary{color:#E0A95C;border-color:#E0A95C}
.cookie-banner .btn-primary:hover{background:#E0A95C;color:var(--slate)}