/* ==================================================
   TSANKI TRAVELZ — FOUNDATION STYLES
   Design principle: luxury whispers, it never shouts.
   One element commands per section. Everything else
   supports. Whitespace is the primary luxury signal.
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

/* ==================================================
   DESIGN TOKENS
================================================== */

:root{

/* Brand */
--navy:#082654;
--navy-dark:#061C3D;
--navy-mid:#0d3a78;

--gold:#C8922A;
--gold-light:#D4A03A;
--gold-muted:rgba(200,146,42,.12);
--gold-rule:rgba(200,146,42,.35);

/* Neutrals — warm, not clinical */
--cream:#FAF8F4;
--warm-white:#FCFCFA;
--off-white:#F7F5F0;
--soft-grey:#F0EEE9;
--mid-grey:#E8E5DF;

/* Text hierarchy — four levels */
--text-primary:#0F1923;
--text-secondary:#3D4A58;
--text-tertiary:#7A8794;
--text-ghost:#A8B2BC;

/* Border — hairline by default */
--border-faint:rgba(0,0,0,.06);
--border-light:rgba(0,0,0,.10);
--border-mid:rgba(0,0,0,.15);

/* Shadows — barely there */
--shadow-xs:0 2px 8px rgba(0,0,0,.04);
--shadow-sm:0 4px 20px rgba(0,0,0,.06);
--shadow-md:0 8px 40px rgba(0,0,0,.08);
--shadow-lg:0 20px 60px rgba(0,0,0,.10);

/* Radius — softer for premium */
--radius-sm:8px;
--radius-md:14px;
--radius-lg:22px;
--radius-xl:32px;

/* Layout */
--container:1180px;
--container-narrow:780px;

/* Transitions */
--ease:.4s cubic-bezier(.25,.46,.45,.94);
--ease-fast:.2s ease;
}

/* ==================================================
   RESET
================================================== */

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

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
font-family:'Inter',sans-serif;
background:var(--cream);
color:var(--text-primary);
line-height:1.8;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

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

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

button{
font-family:inherit;
cursor:pointer;
border:none;
background:none;
}

/* ==================================================
   TYPOGRAPHY
   Hierarchy: display → heading → subheading → body
   Cormorant for presence. Inter for clarity.
================================================== */

h1,h2,h3,h4,h5,h6{
font-family:'Cormorant Garamond',serif;
font-weight:500;
line-height:1.1;
color:var(--navy);
letter-spacing:-.01em;
}

/* Display — hero only, commanding but not screaming */
h1{
font-size:clamp(2.4rem,4.5vw,3.6rem);
line-height:1.08;
letter-spacing:-.02em;
}

/* Section headings — authoritative, restrained */
h2{
font-size:clamp(1.8rem,3vw,2.6rem);
line-height:1.12;
}

/* Card/sub headings */
h3{
font-size:1.35rem;
font-weight:500;
line-height:1.25;
}

h4{
font-size:1.05rem;
font-weight:500;
}

p{
font-size:.9625rem;
line-height:1.85;
color:var(--text-secondary);
}

/* Eyebrow label — used above headings */
.eyebrow{
display:block;
font-family:'Inter',sans-serif;
font-size:.72rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--gold);
margin-bottom:1rem;
}

/* Gold rule separator — thin horizontal line accent */
.gold-rule{
display:block;
width:40px;
height:1px;
background:var(--gold);
margin:1.25rem 0;
}

.gold-rule-center{
margin:1.25rem auto;
}

/* ==================================================
   LAYOUT
================================================== */

.container{
width:min(var(--container),92%);
margin:auto;
}

.container-narrow{
width:min(var(--container-narrow),88%);
margin:auto;
}

/* Vertical rhythm — generous but proportional */
.section{
padding:100px 0;
}

.section-sm{
padding:70px 0;
}

.section-lg{
padding:130px 0;
}

/* ==================================================
   GRID UTILITIES
================================================== */

.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* ==================================================
   SPACING UTILITIES
================================================== */

.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:36px;}
.mb-5{margin-bottom:52px;}

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:36px;}
.mt-5{margin-top:52px;}

/* ==================================================
   SECTION HEADINGS
================================================== */

.section-title{
text-align:center;
margin-bottom:14px;
}

.section-subtitle{
max-width:600px;
margin:0 auto 64px;
text-align:center;
font-size:.9375rem;
color:var(--text-tertiary);
line-height:1.8;
}

/* ==================================================
   BACKGROUNDS
================================================== */

.bg-white{background:white;}
.bg-cream{background:var(--cream);}
.bg-off-white{background:var(--off-white);}
.bg-navy{background:var(--navy);}

/* ==================================================
   TEXT HELPERS
================================================== */

.text-center{text-align:center;}
.text-gold{color:var(--gold);}
.text-white{color:white;}
.text-navy{color:var(--navy);}
.text-muted{color:var(--text-tertiary);}

/* ==================================================
   RESPONSIVE — TYPOGRAPHY
================================================== */

@media(max-width:992px){
.grid-4{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:768px){
.section{padding:70px 0;}
.section-lg{padding:90px 0;}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
h1{font-size:2.2rem;}
h2{font-size:1.7rem;}
.section-subtitle{margin-bottom:44px;}
}

/* ==================================================
   RESPONSIVE — SMALL PHONE (≤480px)
================================================== */

@media(max-width:480px){

h1{
font-size:2rem;
line-height:1.1;
}

h2{
font-size:1.55rem;
}

h3{
font-size:1.2rem;
}

.section{
padding:52px 0;
}

.section-subtitle{
font-size:.875rem;
margin-bottom:32px;
}

.container{
width:min(var(--container),94%);
}

}